diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7a02f50d..c1efb711 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,10 @@
Changelog
=========
+## v9.2.0 *(2023-10-13)*
+- New component: `Range`.
+
+
## v9.1.2, v9.1.1, v9.1.0 *(2023-09-27)*
- New components: `InputRating`, `Tag`, `InputTag`, `InputTime`.
- Add `hideTip` and more, to `Popover`.
@@ -8,6 +12,7 @@ Changelog
- Fix `Popover` z-index (so that it shows over dialogs)
- Many other smaller bugfixes and improvements.
+
## v9.0.5 *(2023-09-22)*
- Reduce `Dialog's` `z-index` so that the popups from the dialog show up on top of it.
diff --git a/docs-src/components/input/index.js b/docs-src/components/input/index.js
index c9dc76fc..0f21125d 100644
--- a/docs-src/components/input/index.js
+++ b/docs-src/components/input/index.js
@@ -11,6 +11,7 @@ export * from './input-tag';
export * from './input-time';
export * from './input-text';
export * from './radio';
+export * from './range';
export * from './select';
export * from './textarea';
export * from './toggle';
diff --git a/docs-src/components/input/range/Range.svelte b/docs-src/components/input/range/Range.svelte
new file mode 100644
index 00000000..884380a8
--- /dev/null
+++ b/docs-src/components/input/range/Range.svelte
@@ -0,0 +1,80 @@
+
Range
+
A wrapper around the native range input.
+
+
Default
+
+
+
Disabled
+
+
+
With tooltip hidden
+
+
+
With different constraints
+
+
+
With label
+
+
+
With label and info text
+
+
+
With label and error and live validation
+
+
+
With label, info, and error
+
+
+
Label on the left
+
+
+
+
+
+
+
+
+
+
diff --git a/docs-src/components/input/range/index.js b/docs-src/components/input/range/index.js
new file mode 100644
index 00000000..7b8fa4d8
--- /dev/null
+++ b/docs-src/components/input/range/index.js
@@ -0,0 +1 @@
+export { default as Range } from './Range.svelte';
diff --git a/docs-src/nav/Nav.svelte b/docs-src/nav/Nav.svelte
index 0d6885cf..0cc5ec1c 100644
--- a/docs-src/nav/Nav.svelte
+++ b/docs-src/nav/Nav.svelte
@@ -29,6 +29,7 @@
+
diff --git a/docs-src/pages/changelog.svelte b/docs-src/pages/changelog.svelte
index 71b93117..9209fc61 100644
--- a/docs-src/pages/changelog.svelte
+++ b/docs-src/pages/changelog.svelte
@@ -1,4 +1,8 @@
Changelog
+
v9.2.0 (2023-10-13)
+
+
New component: Range.
+
v9.1.2, v9.1.1, v9.1.0 (2023-09-27)
New components: InputRating, Tag, InputTag, InputTime.
You need to import the docs/ui.css into your bundle or add it as a script to the index.html.
There are many ways to do that. We specifically didn't use any css-to-js imports as these restrict the tools & the setup you may want to have.
@@ -44,7 +44,7 @@ var o_=Object.create;var vf=Object.defineProperty;var s_=Object.getOwnPropertyDe
}
Note: you need to run npm install after adding this line to your package.json
3. Svelte components
Just import them from the module, as normal:
import { Button } from '@perfectthings/ui';
-
`,_=m(),$=p("div"),$.innerHTML=`
SvelteKit
This framework works with SvelteKit from version 6.4.0.
1. Config
Because this is a purely front-end framework and requires a browser to work, it will not work with SSR, so it needs to be disabled.
+ `,v=c(),w=p("div"),w.innerHTML=`
SvelteKit
This framework works with SvelteKit from version 6.4.0.
1. Config
Because this is a purely front-end framework and requires a browser to work, it will not work with SSR, so it needs to be disabled.
Create a file: src/routes/+layout.js and add this:
export const ssr = false;
2. CSS
If you're using SvelteKit, you need to add the ui.css file to the static folder,
@@ -53,14 +53,14 @@ var o_=Object.create;var vf=Object.defineProperty;var s_=Object.getOwnPropertyDe
...
<link rel="stylesheet" href="%sveltekit.assets%/ui.css" />
</head>
-
Once that's done, you can import the components as normal.
`,k=m(),y=p("div"),y.innerHTML=`
Development
You need node & npm (obviously). Then, run these:
+
Once that's done, you can import the components as normal.
`,y=c(),_=p("div"),_.innerHTML=`
Development
You need node & npm (obviously). Then, run these:
git clone git@github.com:perfect-things/ui.git perfectthings-ui
cd perfectthings-ui
npm i && npm start
-
A browser window should open with the demo of the components.
New: added Utils page in the docs with APIs to the utility functions exposed by the library.
Tooltip was simplified and now the positioning ensures that the tooltip is always visible on the screen.
Popover will now update its position when the window is resized.
The tip of the Tooltip and Popover will now try to be centered on the target element (if the box was offset from the screen edge).
Improved keyboard focus for notifications: when a notification is dismissed from the keyboard (Escape) the focus will be moved to the next available notification.
Improved & standardised z-index throughout the components.
Tweaked Menu positioning to update on window resize.
Tweaked MenuItem for responsiveness (e.g. add ellipsis if the text is too long).
The events property was dropped from the Tooltip, leaving hover and focus events as the default. For use cases when the click was needed, Popover should be used instead.
z-index value of the Popover and Tooltip has been reduced from 9999 to 99, so that it's closer to the content it describes. Ideally tooltips should slide under some other floating elements of the UI (like toolbars or drawers), while remaining above the content layer. This can be o overriden in the app's own css if needed.
New:Popover component. If a Dialog and Tooltip had a child - this would be it. It's a container that can be opened like a dialog, but will be attached to the target element (like a tooltip). It's a great way to display additional information or actions for a specific element on the page. It can contain other components (e.g. buttons) and can serve as a free-form menu.
Fix popover above the target styling.
Simplify & refactor Tooltip to share more code with Popover. Styling and core functionality is now almost the same, while the UX and usage remains a bit different.
Improve InputRadio styling to look more like the rest of the inputs (e.g. checkbox).
Standardise font sizes into css variables: --ui-font-xs=14px, --ui-font-s=15px, --ui-font-m=16px, --ui-font-l=17px, --ui-font-xl=22px
Correct the symbol for Return (\u23CE) in Menu.
Menu can now be centered with the target button (using align attribute).
Context Menu will now open above the long-pressed spot on mobile (by default).
Pressing the same letter key, with the Menu open will now cycle through the items starting with that letter.
Pressing space with the Menu open, while typing something quickly, will not trigger the click event on the currently selected item. This allows to type-to-highlight elements that contain space in the text. Pressing space standalone (while not typing), will trigger the click event.
Removed --ui-margin-xl and --ui-margin-xxl as they were not used.
Merged --ui-border-radius-s with --ui-border-radius and changed to a rem value that calculates to the whole pixel (so that browsers would render it better).
Fixed the NotificationCenter issue, where toasts would not close if navigated away from the page that initialises the component.
Tweaked dialog border-radius to render a bit better (for dialog's header and footer).
Aligned components heights (Menu, Combobox, and InputRadio items).
Fixed Menu's longpress event to not triger when moving the finger (touchmove should stop longpress).
Improve navigation swipe event (swiping can now be triggered by any element that is not scrollable and has no scrollable ancestors).
Increased Menu font size slightly, while decreasing it for everything (102% -> 100% on body).
data attribute in Combobox is deprecated. It will be removed in the next major version. Use items instead.
Combobox and Menu now use the same align function (for consistency and performance) and there's no need to add elevate attribute to either of them, as both popups are rendered inside the body element and are only added to the DOM, when they are opened (to avoid polluting the DOM with unnecessary elements).
New icons:sun and moon for the dark-theme switchers.
Improvement:info, error and label attributes are now supported on other inputs (Combobox, InputDate, Select, ButtonToggle, and Toggle).
Improvement: all components now expose element and inputElement (if there is one (and only one)). The exceptions are NotificationCenter and MessageBox, due to their implementation.
",an=m(),Wt=p("p"),Wt.innerHTML="Other (not mentioned above) color variations, (i.e. -light- and -dark-) have been removed.",_n=m(),ti=p("hr"),Ce=m(),et=p("h2"),et.innerHTML="v7.1.2 (2023-07-05)",un=m(),On=p("ul"),On.innerHTML="
Fix Checkbox label (don't render empty label if no label attribute was passed).
New:MessageBox component for displaying quick info/warning/error messages or confirmation dialogs (replacement for browser's native alert and confirm).
Breaking change: renamed props for all components: className -> class (as it turns out it is possible to use class as a prop name in svelte)
Almost all components now have a class prop, which can be used to add custom classes to the component
Updated docs to reflect the above changes
Docs API table is now alphabetically sorted
Components don't use $$props anymore, as it was causing issues with the class prop. Instead, the props are now explicitly passed down to the component. This is a good thing to do, as it makes the components more explicit and easier to understand.
UX change: autocomplete will not close on scroll or resize events from now on (it can be changed using new properties hideOnScroll and hideOnResize).
fixed: autocomplete issue, where clicking on a filtered list would not select.
tweak: autocomplete will now show "create new item" always (when enabled), not only when the query did not match anything. Except when the query matches an item exactly.
breaking change: cssClass property available on some components has been renamed to className (to be more aligned with the standard workaround in other libs/frameworks).
some components (where possible) are now using $$props to pass-through the properties of the instance down to the component.
breaking change: dist folder has been renamed to docs, as this is the only allowed name for a GH pages folder so that the GH pages is published automatically (without writing a GH action specifically for this).
",n=m(),i=p("tbody");for(let u=0;u`${i}`);return e.push(n.join(" | ")),typeof t.required<"u"&&e.push("required"),typeof t.default<"u"&&e.push(` (defaults to ${t.default})`),e.join(" ")}function Bv(t,e,n){let{title:i="API"}=e,{description:o=""}=e,{props:r=[{name:"id",type:"string",defalut:"",required:!0,description:"assign ID to the underlying component"}]}=e;return t.$$set=u=>{"title"in u&&n(0,i=u.title),"description"in u&&n(1,o=u.description),"props"in u&&n(2,r=u.props)},[i,o,r]}var Wm=class extends se{constructor(e){super(),ae(this,e,Bv,qv,le,{title:0,description:1,props:2})}},qe=Wm;function U1(t){let e,n,i=t[2]===void 0&&Y1(t);return{c(){i&&i.c(),e=m(),n=p("h3"),n.textContent="Example"},m(o,r){i&&i.m(o,r),l(o,e,r),l(o,n,r)},p(o,r){o[2]===void 0?i||(i=Y1(o),i.c(),i.m(e.parentNode,e)):i&&(i.d(1),i=null)},d(o){o&&(s(e),s(n)),i&&i.d(o)}}}function Y1(t){let e;return{c(){e=p("hr")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function Rv(t){let e,n,i,o,r,u=G1(t[0])+"",a,c=!t[1]&&U1(t);return{c(){c&&c.c(),e=m(),n=p("pre"),i=p("code"),o=Q(`
- `),r=new Yn(!1),a=Q(`
-`),r.a=a,H(i,"class","language-svelte")},m(f,d){c&&c.m(f,d),l(f,e,d),l(f,n,d),N(n,i),N(i,o),r.m(u,i),N(i,a)},p(f,[d]){f[1]?c&&(c.d(1),c=null):c?c.p(f,d):(c=U1(f),c.c(),c.m(e.parentNode,e)),d&1&&u!==(u=G1(f[0])+"")&&r.p(u)},i:Le,o:Le,d(f){f&&(s(e),s(n)),c&&c.d(f)}}}function G1(t){return t.replace(/{/gim,"{").replace(/}/gim,"}").replace(//gim,">").replace(/\t/gim," ").trim()}function zv(t,e,n){let{html:i=""}=e,{notitle:o=!1}=e,{nohr:r=void 0}=e;return t.$$set=u=>{"html"in u&&n(0,i=u.html),"notitle"in u&&n(1,o=u.notitle),"nohr"in u&&n(2,r=u.nohr)},[i,o,r]}var Vm=class extends se{constructor(e){super(),ae(this,e,zv,Rv,le,{html:0,notitle:1,nohr:2})}},je=Vm;function jv(t){let e,n;return{c(){e=p("pre"),n=p("code"),H(n,"class","language-")},m(i,o){l(i,e,o),N(e,n),n.innerHTML=t[0]},p(i,[o]){o&1&&(n.innerHTML=i[0])},i:Le,o:Le,d(i){i&&s(e)}}}function Wv(t,e,n){let{tag:i="div"}=e,{props:o={}}=e,{text:r=""}=e,u="";bi(()=>{requestAnimationFrame(a)});function a(){n(0,u=window.Prism.highlight(c(),window.Prism.languages.svelte,"svelte"))}function c(){let f={};for(let b in o)o[b]!==!1&&o[b]!==""&&(f[b]=o[b]);let d=JSON.stringify(f).replace(/"([^"]+)":/g,"$1:").replace(/(:)/g,"=").replace(/,/g," ").replace(/({|}|=true|default)/g,"").trim();return d&&(d=" "+d),r?`<${i}${d}>${r}${i}>`:`<${i}${d}/>`}return t.$$set=f=>{"tag"in f&&n(1,i=f.tag),"props"in f&&n(2,o=f.props),"text"in f&&n(3,r=f.text)},[u,i,o,r]}var Um=class extends se{constructor(e){super(),ae(this,e,Wv,jv,le,{tag:1,props:2,text:3})}},Ym=Um;function Vv(t){let e,n,i=[t[0]],o={};for(let r=0;rGe(_,"value",oe)),y=new Vt({props:{label:"Style",items:t[3],value:""}}),y.$on("change",t[6]),I=new Vt({props:{label:"Type",items:t[4],value:""}}),I.$on("change",t[7]),E=new Vt({props:{label:"Icon",items:t[5],value:""}}),E.$on("change",t[8]);function j(G){t[10](G)}let Z={label:"Round"};t[0].round!==void 0&&(Z.value=t[0].round),D=new rn({props:Z}),pe.push(()=>Ge(D,"value",j));function ge(G){t[11](G)}let Se={label:"Disabled"};return t[0].disabled!==void 0&&(Se.value=t[0].disabled),F=new rn({props:Se}),pe.push(()=>Ge(F,"value",ge)),q=new qe({props:{props:t[2]}}),{c(){e=p("h2"),e.textContent="Button",n=m(),i=p("h3"),i.textContent="Live demo",o=m(),r=p("div"),a.c(),c=m(),L(f.$$.fragment),d=m(),b=p("hr"),g=m(),h=p("div"),L(_.$$.fragment),k=m(),L(y.$$.fragment),M=m(),L(I.$$.fragment),A=m(),L(E.$$.fragment),T=m(),L(D.$$.fragment),x=m(),L(F.$$.fragment),z=m(),W=p("hr"),Y=m(),L(q.$$.fragment),H(r,"class","docs-buttons-row"),tn(r,"height","3rem"),H(h,"class","button-demo-props")},m(G,ee){l(G,e,ee),l(G,n,ee),l(G,i,ee),l(G,o,ee),l(G,r,ee),R[u].m(r,null),l(G,c,ee),C(f,G,ee),l(G,d,ee),l(G,b,ee),l(G,g,ee),l(G,h,ee),C(_,h,null),N(h,k),C(y,h,null),N(h,M),C(I,h,null),N(h,A),C(E,h,null),N(h,T),C(D,h,null),N(h,x),C(F,h,null),l(G,z,ee),l(G,W,ee),l(G,Y,ee),C(q,G,ee),O=!0},p(G,[ee]){let ie=u;u=K(G,ee),u===ie?R[u].p(G,ee):(We(),w(R[ie],1,1,()=>{R[ie]=null}),Ve(),a=R[u],a?a.p(G,ee):(a=R[u]=J[u](G),a.c()),v(a,1),a.m(r,null));let he={};ee&2&&(he.text=G[1]),ee&1&&(he.props=G[0]),f.$set(he);let ke={};!$&&ee&2&&($=!0,ke.value=G[1],Ye(()=>$=!1)),_.$set(ke);let be={};!P&&ee&1&&(P=!0,be.value=G[0].round,Ye(()=>P=!1)),D.$set(be);let ue={};!B&&ee&1&&(B=!0,ue.value=G[0].disabled,Ye(()=>B=!1)),F.$set(ue)},i(G){O||(v(a),v(f.$$.fragment,G),v(_.$$.fragment,G),v(y.$$.fragment,G),v(I.$$.fragment,G),v(E.$$.fragment,G),v(D.$$.fragment,G),v(F.$$.fragment,G),v(q.$$.fragment,G),O=!0)},o(G){w(a),w(f.$$.fragment,G),w(_.$$.fragment,G),w(y.$$.fragment,G),w(I.$$.fragment,G),w(E.$$.fragment,G),w(D.$$.fragment,G),w(F.$$.fragment,G),w(q.$$.fragment,G),O=!1},d(G){G&&(s(e),s(n),s(i),s(o),s(r),s(c),s(d),s(b),s(g),s(h),s(z),s(W),s(Y)),R[u].d(),S(f,G),S(_),S(y),S(I),S(E),S(D),S(F),S(q,G)}}}function Kv(t,e,n){let i=[{name:"class",type:"string",description:"Additional css class name to be added to the component."},{name:"danger",description:"Button type: danger"},{name:"data-",description:"Dataset attribute allows to pass some data of a primitive type (string, number, boolean), which will be accessible in the on:click event listener, via button reference."},{name:"disabled",description:"Makes the button disabled"},{name:"icon",type:"string",description:'Adds an icon, with this name, to the button (see icons section for icon names)'},{name:"id",type:"string",description:"Assign ID to the underlying button"},{name:"info",description:"Button type: info"},{name:"link",description:"Button style: link"},{name:"outline",description:"Button style: outline"},{name:"round",description:"Makes the button round"},{name:"submit",type:["true","false"],default:"false",description:"If true button type is set to submit, otherwise it's button"},{name:"success",description:"Button type: success"},{name:"text",description:"Button style: text"},{name:"title",type:"string",description:"Assign title to the underlying button"},{name:"warning",description:"Button type: warning"},{name:"bind:element",type:"element",description:"Exposes the HTML element of the component."},{name:"on:click",type:"function",description:"Triggered when the button is clicked."}],o={},r="Demo button",u=[{name:"Normal",value:""},{name:"Outline",value:"outline"},{name:"Text",value:"text"},{name:"Link",value:"link"}],a=[{name:"Default",value:""},{name:"Info",value:"info"},{name:"Success",value:"success"},{name:"Warning",value:"warning"},{name:"Danger",value:"danger"}],c=[{name:"none",value:""},{name:"info",value:"info"},{name:"check",value:"check"},{name:"alert",value:"alert"},{name:"trash",value:"trash"}];function f(k){n(0,o.outline=!1,o),n(0,o.text=!1,o),n(0,o.link=!1,o),g(k.detail,!0)}function d(k){n(0,o.info=!1,o),n(0,o.success=!1,o),n(0,o.warning=!1,o),n(0,o.danger=!1,o),g(k.detail,!0)}function b(k){g("icon",k.detail)}function g(k,y){!k||typeof y>"u"||n(0,o[k]=y,o)}function h(k){r=k,n(1,r)}function _(k){t.$$.not_equal(o.round,k)&&(o.round=k,n(0,o))}function $(k){t.$$.not_equal(o.disabled,k)&&(o.disabled=k,n(0,o))}return[o,r,i,u,a,c,f,d,b,h,_,$]}var Gm=class extends se{constructor(e){super(),ae(this,e,Kv,Gv,le,{})}},Km=Gm;function Xv(t){let e;return{c(){e=Q("Hello")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function Zv(t){let e;return{c(){e=Q("Info")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function Jv(t){let e;return{c(){e=Q("Warning")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function Qv(t){let e;return{c(){e=Q("Warning")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function e$(t){let e;return{c(){e=Q("Danger")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function t$(t){let e;return{c(){e=Q("Hello")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function n$(t){let e;return{c(){e=Q("Info")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function i$(t){let e;return{c(){e=Q("Warning")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function o$(t){let e;return{c(){e=Q("Warning")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function s$(t){let e;return{c(){e=Q("Danger")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function l$(t){let e;return{c(){e=Q("Hello")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function r$(t){let e;return{c(){e=Q("Info")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function a$(t){let e;return{c(){e=Q("Success")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function u$(t){let e;return{c(){e=Q("Warning")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function f$(t){let e;return{c(){e=Q("Danger")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function c$(t){let e;return{c(){e=Q("Help")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function m$(t){let e;return{c(){e=Q("Info")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function d$(t){let e;return{c(){e=Q("Success")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function p$(t){let e;return{c(){e=Q("Warning")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function h$(t){let e;return{c(){e=Q("Delete")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function g$(t){let e;return{c(){e=Q("Hello")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function b$(t){let e;return{c(){e=Q("Info")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function _$(t){let e;return{c(){e=Q("Warning")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function v$(t){let e;return{c(){e=Q("Warning")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function $$(t){let e;return{c(){e=Q("Danger")},m(n,i){l(n,e,i)},d(n){n&&s(e)}}}function w$(t){let e,n,i,o,r,u,a,c,f,d,b,g,h,_,$,k,y,M,I,A,E,T,D,P,x,F,B,z,W,Y,q,O,J,R,K,oe,X,j,Z,ge,Se,G,ee,ie,he,ke,be,ue,ne,de,fe,ce,me,Ae,_e,xe,we,re,Ie,Ue,it,ot,ft,Ee,Fe,ut,bt,Me,ct,pt,kt,at,Te,Ne,jt,mt,Ft,Pt,xt,Oe,Xe,Yt,Kt,Gt,Xt,Rt,on,zt,Zt,ye,He,an,Wt,_n,ti,Ce,et,un,On,fn,xn,cn,Mn,mn,En,dn,vn;return c=new rt({props:{$$slots:{default:[Xv]},$$scope:{ctx:t}}}),d=new rt({props:{info:!0,$$slots:{default:[Zv]},$$scope:{ctx:t}}}),g=new rt({props:{success:!0,$$slots:{default:[Jv]},$$scope:{ctx:t}}}),_=new rt({props:{warning:!0,$$slots:{default:[Qv]},$$scope:{ctx:t}}}),k=new rt({props:{danger:!0,$$slots:{default:[e$]},$$scope:{ctx:t}}}),E=new rt({props:{pressed:!0,$$slots:{default:[t$]},$$scope:{ctx:t}}}),D=new rt({props:{pressed:!0,info:!0,$$slots:{default:[n$]},$$scope:{ctx:t}}}),x=new rt({props:{pressed:!0,success:!0,$$slots:{default:[i$]},$$scope:{ctx:t}}}),B=new rt({props:{pressed:!0,warning:!0,$$slots:{default:[o$]},$$scope:{ctx:t}}}),W=new rt({props:{pressed:!0,danger:!0,$$slots:{default:[s$]},$$scope:{ctx:t}}}),R=new rt({props:{pressed:!0,disabled:!0,$$slots:{default:[l$]},$$scope:{ctx:t}}}),oe=new rt({props:{pressed:!0,disabled:!0,info:!0,$$slots:{default:[r$]},$$scope:{ctx:t}}}),j=new rt({props:{pressed:!0,disabled:!0,success:!0,$$slots:{default:[a$]},$$scope:{ctx:t}}}),ge=new rt({props:{pressed:!0,disabled:!0,warning:!0,$$slots:{default:[u$]},$$scope:{ctx:t}}}),G=new rt({props:{pressed:!0,disabled:!0,danger:!0,$$slots:{default:[f$]},$$scope:{ctx:t}}}),be=new rt({props:{icon:"help",$$slots:{default:[c$]},$$scope:{ctx:t}}}),ne=new rt({props:{icon:"info",info:!0,$$slots:{default:[m$]},$$scope:{ctx:t}}}),fe=new rt({props:{icon:"check",success:!0,$$slots:{default:[d$]},$$scope:{ctx:t}}}),me=new rt({props:{icon:"alert",warning:!0,$$slots:{default:[p$]},$$scope:{ctx:t}}}),_e=new rt({props:{icon:"trash",danger:!0,$$slots:{default:[h$]},$$scope:{ctx:t}}}),Ue=new rt({props:{outline:!0,$$slots:{default:[g$]},$$scope:{ctx:t}}}),ot=new rt({props:{outline:!0,info:!0,$$slots:{default:[b$]},$$scope:{ctx:t}}}),Ee=new rt({props:{outline:!0,success:!0,$$slots:{default:[_$]},$$scope:{ctx:t}}}),ut=new rt({props:{outline:!0,warning:!0,$$slots:{default:[v$]},$$scope:{ctx:t}}}),Me=new rt({props:{outline:!0,danger:!0,$$slots:{default:[$$]},$$scope:{ctx:t}}}),Ft=new rt({props:{icon:"help"}}),xt=new rt({props:{icon:"info",info:!0}}),Xe=new rt({props:{icon:"check",success:!0}}),Kt=new rt({props:{icon:"alert",warning:!0}}),Xt=new rt({props:{icon:"trash",danger:!0}}),_n=new rt({props:{round:!0,icon:"help"}}),Ce=new rt({props:{round:!0,icon:"info",info:!0}}),un=new rt({props:{round:!0,icon:"check",success:!0}}),fn=new rt({props:{round:!0,icon:"alert",warning:!0}}),cn=new rt({props:{round:!0,icon:"trash",danger:!0}}),mn=new je({props:{html:t[1]}}),dn=new qe({props:{props:t[0]}}),{c(){e=p("h2"),e.textContent="Push Button",n=m(),i=p("h3"),i.textContent="Normal",o=m(),r=p("h4"),r.textContent="Default",u=m(),a=p("div"),L(c.$$.fragment),f=m(),L(d.$$.fragment),b=m(),L(g.$$.fragment),h=m(),L(_.$$.fragment),$=m(),L(k.$$.fragment),y=m(),M=p("h4"),M.textContent="Pressed",I=m(),A=p("div"),L(E.$$.fragment),T=m(),L(D.$$.fragment),P=m(),L(x.$$.fragment),F=m(),L(B.$$.fragment),z=m(),L(W.$$.fragment),Y=m(),q=p("h4"),q.textContent="Disabled",O=m(),J=p("div"),L(R.$$.fragment),K=m(),L(oe.$$.fragment),X=m(),L(j.$$.fragment),Z=m(),L(ge.$$.fragment),Se=m(),L(G.$$.fragment),ee=m(),ie=p("h4"),ie.textContent="With icon",he=m(),ke=p("div"),L(be.$$.fragment),ue=m(),L(ne.$$.fragment),de=m(),L(fe.$$.fragment),ce=m(),L(me.$$.fragment),Ae=m(),L(_e.$$.fragment),xe=m(),we=p("h4"),we.textContent="Outline",re=m(),Ie=p("div"),L(Ue.$$.fragment),it=m(),L(ot.$$.fragment),ft=m(),L(Ee.$$.fragment),Fe=m(),L(ut.$$.fragment),bt=m(),L(Me.$$.fragment),ct=m(),pt=p("hr"),kt=m(),at=p("h3"),at.textContent="Icon only buttons",Te=m(),Ne=p("h4"),Ne.textContent="Default",jt=m(),mt=p("div"),L(Ft.$$.fragment),Pt=m(),L(xt.$$.fragment),Oe=m(),L(Xe.$$.fragment),Yt=m(),L(Kt.$$.fragment),Gt=m(),L(Xt.$$.fragment),Rt=m(),on=p("hr"),zt=m(),Zt=p("h3"),Zt.textContent="Icon only, and round",ye=m(),He=p("h4"),He.textContent="Default",an=m(),Wt=p("div"),L(_n.$$.fragment),ti=m(),L(Ce.$$.fragment),et=m(),L(un.$$.fragment),On=m(),L(fn.$$.fragment),xn=m(),L(cn.$$.fragment),Mn=m(),L(mn.$$.fragment),En=m(),L(dn.$$.fragment),H(a,"class","docs-buttons-row"),H(A,"class","docs-buttons-row"),H(J,"class","docs-buttons-row"),H(ke,"class","docs-buttons-row"),H(Ie,"class","docs-buttons-row"),H(mt,"class","docs-buttons-row"),H(Wt,"class","docs-buttons-row")},m(ve,Pe){l(ve,e,Pe),l(ve,n,Pe),l(ve,i,Pe),l(ve,o,Pe),l(ve,r,Pe),l(ve,u,Pe),l(ve,a,Pe),C(c,a,null),N(a,f),C(d,a,null),N(a,b),C(g,a,null),N(a,h),C(_,a,null),N(a,$),C(k,a,null),l(ve,y,Pe),l(ve,M,Pe),l(ve,I,Pe),l(ve,A,Pe),C(E,A,null),N(A,T),C(D,A,null),N(A,P),C(x,A,null),N(A,F),C(B,A,null),N(A,z),C(W,A,null),l(ve,Y,Pe),l(ve,q,Pe),l(ve,O,Pe),l(ve,J,Pe),C(R,J,null),N(J,K),C(oe,J,null),N(J,X),C(j,J,null),N(J,Z),C(ge,J,null),N(J,Se),C(G,J,null),l(ve,ee,Pe),l(ve,ie,Pe),l(ve,he,Pe),l(ve,ke,Pe),C(be,ke,null),N(ke,ue),C(ne,ke,null),N(ke,de),C(fe,ke,null),N(ke,ce),C(me,ke,null),N(ke,Ae),C(_e,ke,null),l(ve,xe,Pe),l(ve,we,Pe),l(ve,re,Pe),l(ve,Ie,Pe),C(Ue,Ie,null),N(Ie,it),C(ot,Ie,null),N(Ie,ft),C(Ee,Ie,null),N(Ie,Fe),C(ut,Ie,null),N(Ie,bt),C(Me,Ie,null),l(ve,ct,Pe),l(ve,pt,Pe),l(ve,kt,Pe),l(ve,at,Pe),l(ve,Te,Pe),l(ve,Ne,Pe),l(ve,jt,Pe),l(ve,mt,Pe),C(Ft,mt,null),N(mt,Pt),C(xt,mt,null),N(mt,Oe),C(Xe,mt,null),N(mt,Yt),C(Kt,mt,null),N(mt,Gt),C(Xt,mt,null),l(ve,Rt,Pe),l(ve,on,Pe),l(ve,zt,Pe),l(ve,Zt,Pe),l(ve,ye,Pe),l(ve,He,Pe),l(ve,an,Pe),l(ve,Wt,Pe),C(_n,Wt,null),N(Wt,ti),C(Ce,Wt,null),N(Wt,et),C(un,Wt,null),N(Wt,On),C(fn,Wt,null),N(Wt,xn),C(cn,Wt,null),l(ve,Mn,Pe),C(mn,ve,Pe),l(ve,En,Pe),C(dn,ve,Pe),vn=!0},p(ve,[Pe]){let ni={};Pe&4&&(ni.$$scope={dirty:Pe,ctx:ve}),c.$set(ni);let Hn={};Pe&4&&(Hn.$$scope={dirty:Pe,ctx:ve}),d.$set(Hn);let ii={};Pe&4&&(ii.$$scope={dirty:Pe,ctx:ve}),g.$set(ii);let Pn={};Pe&4&&(Pn.$$scope={dirty:Pe,ctx:ve}),_.$set(Pn);let oi={};Pe&4&&(oi.$$scope={dirty:Pe,ctx:ve}),k.$set(oi);let Nn={};Pe&4&&(Nn.$$scope={dirty:Pe,ctx:ve}),E.$set(Nn);let si={};Pe&4&&(si.$$scope={dirty:Pe,ctx:ve}),D.$set(si);let Fn={};Pe&4&&(Fn.$$scope={dirty:Pe,ctx:ve}),x.$set(Fn);let li={};Pe&4&&(li.$$scope={dirty:Pe,ctx:ve}),B.$set(li);let qn={};Pe&4&&(qn.$$scope={dirty:Pe,ctx:ve}),W.$set(qn);let ri={};Pe&4&&(ri.$$scope={dirty:Pe,ctx:ve}),R.$set(ri);let Bn={};Pe&4&&(Bn.$$scope={dirty:Pe,ctx:ve}),oe.$set(Bn);let ai={};Pe&4&&(ai.$$scope={dirty:Pe,ctx:ve}),j.$set(ai);let Rn={};Pe&4&&(Rn.$$scope={dirty:Pe,ctx:ve}),ge.$set(Rn);let ui={};Pe&4&&(ui.$$scope={dirty:Pe,ctx:ve}),G.$set(ui);let zn={};Pe&4&&(zn.$$scope={dirty:Pe,ctx:ve}),be.$set(zn);let fi={};Pe&4&&(fi.$$scope={dirty:Pe,ctx:ve}),ne.$set(fi);let jn={};Pe&4&&(jn.$$scope={dirty:Pe,ctx:ve}),fe.$set(jn);let ci={};Pe&4&&(ci.$$scope={dirty:Pe,ctx:ve}),me.$set(ci);let Wn={};Pe&4&&(Wn.$$scope={dirty:Pe,ctx:ve}),_e.$set(Wn);let mi={};Pe&4&&(mi.$$scope={dirty:Pe,ctx:ve}),Ue.$set(mi);let Vn={};Pe&4&&(Vn.$$scope={dirty:Pe,ctx:ve}),ot.$set(Vn);let di={};Pe&4&&(di.$$scope={dirty:Pe,ctx:ve}),Ee.$set(di);let Un={};Pe&4&&(Un.$$scope={dirty:Pe,ctx:ve}),ut.$set(Un);let pi={};Pe&4&&(pi.$$scope={dirty:Pe,ctx:ve}),Me.$set(pi)},i(ve){vn||(v(c.$$.fragment,ve),v(d.$$.fragment,ve),v(g.$$.fragment,ve),v(_.$$.fragment,ve),v(k.$$.fragment,ve),v(E.$$.fragment,ve),v(D.$$.fragment,ve),v(x.$$.fragment,ve),v(B.$$.fragment,ve),v(W.$$.fragment,ve),v(R.$$.fragment,ve),v(oe.$$.fragment,ve),v(j.$$.fragment,ve),v(ge.$$.fragment,ve),v(G.$$.fragment,ve),v(be.$$.fragment,ve),v(ne.$$.fragment,ve),v(fe.$$.fragment,ve),v(me.$$.fragment,ve),v(_e.$$.fragment,ve),v(Ue.$$.fragment,ve),v(ot.$$.fragment,ve),v(Ee.$$.fragment,ve),v(ut.$$.fragment,ve),v(Me.$$.fragment,ve),v(Ft.$$.fragment,ve),v(xt.$$.fragment,ve),v(Xe.$$.fragment,ve),v(Kt.$$.fragment,ve),v(Xt.$$.fragment,ve),v(_n.$$.fragment,ve),v(Ce.$$.fragment,ve),v(un.$$.fragment,ve),v(fn.$$.fragment,ve),v(cn.$$.fragment,ve),v(mn.$$.fragment,ve),v(dn.$$.fragment,ve),vn=!0)},o(ve){w(c.$$.fragment,ve),w(d.$$.fragment,ve),w(g.$$.fragment,ve),w(_.$$.fragment,ve),w(k.$$.fragment,ve),w(E.$$.fragment,ve),w(D.$$.fragment,ve),w(x.$$.fragment,ve),w(B.$$.fragment,ve),w(W.$$.fragment,ve),w(R.$$.fragment,ve),w(oe.$$.fragment,ve),w(j.$$.fragment,ve),w(ge.$$.fragment,ve),w(G.$$.fragment,ve),w(be.$$.fragment,ve),w(ne.$$.fragment,ve),w(fe.$$.fragment,ve),w(me.$$.fragment,ve),w(_e.$$.fragment,ve),w(Ue.$$.fragment,ve),w(ot.$$.fragment,ve),w(Ee.$$.fragment,ve),w(ut.$$.fragment,ve),w(Me.$$.fragment,ve),w(Ft.$$.fragment,ve),w(xt.$$.fragment,ve),w(Xe.$$.fragment,ve),w(Kt.$$.fragment,ve),w(Xt.$$.fragment,ve),w(_n.$$.fragment,ve),w(Ce.$$.fragment,ve),w(un.$$.fragment,ve),w(fn.$$.fragment,ve),w(cn.$$.fragment,ve),w(mn.$$.fragment,ve),w(dn.$$.fragment,ve),vn=!1},d(ve){ve&&(s(e),s(n),s(i),s(o),s(r),s(u),s(a),s(y),s(M),s(I),s(A),s(Y),s(q),s(O),s(J),s(ee),s(ie),s(he),s(ke),s(xe),s(we),s(re),s(Ie),s(ct),s(pt),s(kt),s(at),s(Te),s(Ne),s(jt),s(mt),s(Rt),s(on),s(zt),s(Zt),s(ye),s(He),s(an),s(Wt),s(Mn),s(En)),S(c),S(d),S(g),S(_),S(k),S(E),S(D),S(x),S(B),S(W),S(R),S(oe),S(j),S(ge),S(G),S(be),S(ne),S(fe),S(me),S(_e),S(Ue),S(ot),S(Ee),S(ut),S(Me),S(Ft),S(xt),S(Xe),S(Kt),S(Xt),S(_n),S(Ce),S(un),S(fn),S(cn),S(mn,ve),S(dn,ve)}}}function y$(t){return[[{name:"class",type:"string",description:"Additional css class name to be added to the component."},{name:"danger",description:"Button type: danger"},{name:"disabled",description:"Makes the button disabled"},{name:"icon",type:"string",description:'Adds an icon, with this name, to the button (see icons section for icon names)'},{name:"id",type:"string",description:"Assign ID to the underlying button"},{name:"outline",description:"Button style: outline"},{name:"pressed",type:["true","false"],default:"false",description:"Initial pressed state of the button."},{name:"round",description:"Makes the button round"},{name:"submit",type:["true","false"],default:"false",description:"If true button type is set to submit, otherwise it's button"},{name:"success",description:"Button type: success"},{name:"title",type:"string",description:"Assign title to the underlying button"},{name:"warning",description:"Button type: warning"},{name:"bind:element",type:"element",description:"Exposes the HTML element of the component."},{name:"on:click",type:"function",description:"Triggered when the button is clicked."}],`
+
A browser window should open with the demo of the components.
New: added Utils page in the docs with APIs to the utility functions exposed by the library.
Tooltip was simplified and now the positioning ensures that the tooltip is always visible on the screen.
Popover will now update its position when the window is resized.
The tip of the Tooltip and Popover will now try to be centered on the target element (if the box was offset from the screen edge).
Improved keyboard focus for notifications: when a notification is dismissed from the keyboard (Escape) the focus will be moved to the next available notification.
Improved & standardised z-index throughout the components.
Tweaked Menu positioning to update on window resize.
Tweaked MenuItem for responsiveness (e.g. add ellipsis if the text is too long).
The events property was dropped from the Tooltip, leaving hover and focus events as the default. For use cases when the click was needed, Popover should be used instead.
z-index value of the Popover and Tooltip has been reduced from 9999 to 99, so that it's closer to the content it describes. Ideally tooltips should slide under some other floating elements of the UI (like toolbars or drawers), while remaining above the content layer. This can be o overriden in the app's own css if needed.
New:Popover component. If a Dialog and Tooltip had a child - this would be it. It's a container that can be opened like a dialog, but will be attached to the target element (like a tooltip). It's a great way to display additional information or actions for a specific element on the page. It can contain other components (e.g. buttons) and can serve as a free-form menu.
Fix popover above the target styling.
Simplify & refactor Tooltip to share more code with Popover. Styling and core functionality is now almost the same, while the UX and usage remains a bit different.
Improve InputRadio styling to look more like the rest of the inputs (e.g. checkbox).
Standardise font sizes into css variables: --ui-font-xs=14px, --ui-font-s=15px, --ui-font-m=16px, --ui-font-l=17px, --ui-font-xl=22px
Correct the symbol for Return (\u23CE) in Menu.
Menu can now be centered with the target button (using align attribute).
Context Menu will now open above the long-pressed spot on mobile (by default).
Pressing the same letter key, with the Menu open will now cycle through the items starting with that letter.
Pressing space with the Menu open, while typing something quickly, will not trigger the click event on the currently selected item. This allows to type-to-highlight elements that contain space in the text. Pressing space standalone (while not typing), will trigger the click event.
Removed --ui-margin-xl and --ui-margin-xxl as they were not used.
Merged --ui-border-radius-s with --ui-border-radius and changed to a rem value that calculates to the whole pixel (so that browsers would render it better).
Fixed the NotificationCenter issue, where toasts would not close if navigated away from the page that initialises the component.
Tweaked dialog border-radius to render a bit better (for dialog's header and footer).
Aligned components heights (Menu, Combobox, and InputRadio items).
Fixed Menu's longpress event to not triger when moving the finger (touchmove should stop longpress).
Improve navigation swipe event (swiping can now be triggered by any element that is not scrollable and has no scrollable ancestors).
Increased Menu font size slightly, while decreasing it for everything (102% -> 100% on body).
data attribute in Combobox is deprecated. It will be removed in the next major version. Use items instead.
Combobox and Menu now use the same align function (for consistency and performance) and there's no need to add elevate attribute to either of them, as both popups are rendered inside the body element and are only added to the DOM, when they are opened (to avoid polluting the DOM with unnecessary elements).
New icons:sun and moon for the dark-theme switchers.
Improvement:info, error and label attributes are now supported on other inputs (Combobox, InputDate, Select, ButtonToggle, and Toggle).
Improvement: all components now expose element and inputElement (if there is one (and only one)). The exceptions are NotificationCenter and MessageBox, due to their implementation.
",_n=c(),Hn=p("p"),Hn.innerHTML="Other (not mentioned above) color variations, (i.e. -light- and -dark-) have been removed.",Se=c(),et=p("hr"),fn=c(),Pn=p("h2"),Pn.innerHTML="v7.1.2 (2023-07-05)",mn=c(),Mn=p("ul"),Mn.innerHTML="
Fix Checkbox label (don't render empty label if no label attribute was passed).
New:MessageBox component for displaying quick info/warning/error messages or confirmation dialogs (replacement for browser's native alert and confirm).
Breaking change: renamed props for all components: className -> class (as it turns out it is possible to use class as a prop name in svelte)
Almost all components now have a class prop, which can be used to add custom classes to the component
Updated docs to reflect the above changes
Docs API table is now alphabetically sorted
Components don't use $$props anymore, as it was causing issues with the class prop. Instead, the props are now explicitly passed down to the component. This is a good thing to do, as it makes the components more explicit and easier to understand.
UX change: autocomplete will not close on scroll or resize events from now on (it can be changed using new properties hideOnScroll and hideOnResize).
fixed: autocomplete issue, where clicking on a filtered list would not select.
tweak: autocomplete will now show "create new item" always (when enabled), not only when the query did not match anything. Except when the query matches an item exactly.
breaking change: cssClass property available on some components has been renamed to className (to be more aligned with the standard workaround in other libs/frameworks).
some components (where possible) are now using $$props to pass-through the properties of the instance down to the component.
breaking change: dist folder has been renamed to docs, as this is the only allowed name for a GH pages folder so that the GH pages is published automatically (without writing a GH action specifically for this).