diff --git a/404.html b/404.html index 1c9d14af..5501a31d 100644 --- a/404.html +++ b/404.html @@ -2,13 +2,15 @@ - Carbon Components Svelte + 404 - - -
+ + +

404

Page not found. + Return home
- + \ No newline at end of file diff --git a/_config.yml b/_config.yml index 5f054c82..a016990c 100644 --- a/_config.yml +++ b/_config.yml @@ -3,4 +3,4 @@ include: - _*.js - assets - assets/*_.js - - assets/*.js + - assets/*.js \ No newline at end of file diff --git a/assets/Accordion.0868806d.js b/assets/Accordion.fd5a22f3.js similarity index 99% rename from assets/Accordion.0868806d.js rename to assets/Accordion.fd5a22f3.js index 713bf9c1..ff699acd 100644 --- a/assets/Accordion.0868806d.js +++ b/assets/Accordion.fd5a22f3.js @@ -1 +1 @@ -let n=document.createElement("style");n.innerHTML="",document.head.appendChild(n);import{S as t,i as s,s as a,v as e,D as o,q as c,L as p,h as l,k as i,l as r,n as u,o as $,r as k,M as m,w as d,N as f,O as g,I as h,z as x,A as v,t as A,b,J as w,C,G as I,g as y,c as _,j as E,a as T,p as j,y as L,m as D,d as S,Y as R,x as H,E as M,F as U,Z as B,_ as N,B as F,K as P,a3 as V}from"./index.3ce6747c.js";import{S as Y}from"./SkeletonText.7e7dcad9.js";import"./Button.d7a75b79.js";import"./index.6957f369.js";import{C as z,P as O}from"./Preview.f61f216f.js";import"./ChevronDown16.6514157c.js";import"./Loading.f1e97527.js";import"./Column.1fb4637e.js";import"./Content.9ffe34a9.js";import"./store.e3a4d2a9.js";function q(n){let t,s;return{c(){t=p("title"),s=l(n[2])},l(a){t=i(a,"title",{},1);var e=r(t);s=u(e,n[2]),e.forEach($)},m(n,a){c(n,t,a),k(t,s)},p(n,t){4&t&&m(s,n[2])},d(n){n&&$(t)}}}function G(n){let t,s,a,l,u;const m=n[8].default,C=e(m,n,n[7],null),I=C||function(n){let t,s=n[2]&&q(n);return{c(){s&&s.c(),t=o()},l(n){s&&s.l(n),t=o()},m(n,a){s&&s.m(n,a),c(n,t,a)},p(n,a){n[2]?s?s.p(n,a):(s=q(n),s.c(),s.m(t.parentNode,t)):s&&(s.d(1),s=null)},d(n){s&&s.d(n),n&&$(t)}}}(n);let y=[{"data-carbon-icon":"ChevronRight16"},{xmlns:"http://www.w3.org/2000/svg"},{viewBox:"0 0 16 16"},{fill:"currentColor"},{width:"16"},{height:"16"},{class:n[0]},{preserveAspectRatio:"xMidYMid meet"},{style:n[3]},{id:n[1]},n[4]],_={};for(let n=0;n{s(18,t=d(d({},t),C(n))),"class"in n&&s(0,i=n.class),"id"in n&&s(1,r=n.id),"tabindex"in n&&s(5,u=n.tabindex),"focusable"in n&&s(6,$=n.focusable),"title"in n&&s(2,k=n.title),"style"in n&&s(3,m=n.style),"$$scope"in n&&s(7,l=n.$$scope)},n.$$.update=()=>{s(15,a=t["aria-label"]),s(16,e=t["aria-labelledby"]),98308&n.$$.dirty&&s(17,o=a||e||k),229472&n.$$.dirty&&s(4,c={"aria-label":a,"aria-labelledby":e,"aria-hidden":!o||void 0,role:o?"img":void 0,focusable:"0"===u||$,tabindex:u})},t=C(t),[i,r,k,m,c,u,$,l,p,function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)}]}class K extends t{constructor(n){super(),s(this,n,J,G,a,{class:0,id:1,tabindex:5,focusable:6,title:2,style:3})}}function Z(n,t,s){const a=n.slice();return a[7]=t[s],a[9]=s,a}function Q(n){let t,s,a,e,o,p,l,u,m,d,g,h,x;return a=new K({props:{class:"bx--accordion__arrow"}}),o=new Y({props:{class:"bx--accordion__title"}}),u=new Y({props:{width:"90%"}}),d=new Y({props:{width:"80%"}}),h=new Y({props:{width:"95%"}}),{c(){t=y("li"),s=y("span"),_(a.$$.fragment),e=E(),_(o.$$.fragment),p=E(),l=y("div"),_(u.$$.fragment),m=E(),_(d.$$.fragment),g=E(),_(h.$$.fragment),this.h()},l(n){t=i(n,"LI",{});var c=r(t);s=i(c,"SPAN",{});var k=r(s);T(a.$$.fragment,k),e=j(k),T(o.$$.fragment,k),k.forEach($),p=j(c),l=i(c,"DIV",{class:!0});var f=r(l);T(u.$$.fragment,f),m=j(f),T(d.$$.fragment,f),g=j(f),T(h.$$.fragment,f),f.forEach($),c.forEach($),this.h()},h(){L(s,"bx--accordion__heading",!0),f(l,"class","bx--accordion__content"),L(t,"bx--accordion__item",!0),L(t,"bx--accordion__item--active",!0)},m(n,i){c(n,t,i),k(t,s),D(a,s,null),k(s,e),D(o,s,null),k(t,p),k(t,l),D(u,l,null),k(l,m),D(d,l,null),k(l,g),D(h,l,null),x=!0},i(n){x||(A(a.$$.fragment,n),A(o.$$.fragment,n),A(u.$$.fragment,n),A(d.$$.fragment,n),A(h.$$.fragment,n),x=!0)},o(n){b(a.$$.fragment,n),b(o.$$.fragment,n),b(u.$$.fragment,n),b(d.$$.fragment,n),b(h.$$.fragment,n),x=!1},d(n){n&&$(t),S(a),S(o),S(u),S(d),S(h)}}}function W(n,t){let s,a,e,o,p,l,u;return e=new K({props:{class:"bx--accordion__arrow"}}),p=new Y({props:{class:"bx--accordion__title"}}),{key:n,first:null,c(){s=y("li"),a=y("span"),_(e.$$.fragment),o=E(),_(p.$$.fragment),l=E(),this.h()},l(n){s=i(n,"LI",{class:!0});var t=r(s);a=i(t,"SPAN",{class:!0});var c=r(a);T(e.$$.fragment,c),o=j(c),T(p.$$.fragment,c),c.forEach($),l=j(t),t.forEach($),this.h()},h(){f(a,"class","bx--accordion__heading"),f(s,"class","bx--accordion__item"),this.first=s},m(n,t){c(n,s,t),k(s,a),D(e,a,null),k(a,o),D(p,a,null),k(s,l),u=!0},p:R,i(n){u||(A(e.$$.fragment,n),A(p.$$.fragment,n),u=!0)},o(n){b(e.$$.fragment,n),b(p.$$.fragment,n),u=!1},d(n){n&&$(s),S(e),S(p)}}}function X(n){let t,s,a,e,o,p=[],l=new Map,u=n[1]&&Q(),m=Array.from({length:n[1]?n[0]-1:n[0]},nn);const f=n=>n[7];for(let t=0;t{u=null}),U()),3&a){const s=Array.from({length:n[1]?n[0]-1:n[0]},nn);M(),p=B(p,a,f,1,n,s,l,t,N,W,null,Z),U()}H(t,x=v(g,[4&a&&n[2]])),L(t,"bx--accordion",!0),L(t,"bx--skeleton",!0)},i(n){if(!a){A(u);for(let n=0;nt;function tn(n,t,s){const a=["count","open"];let e=F(t,a),{count:o=4}=t,{open:c=!0}=t;return n.$$set=n=>{t=d(d({},t),C(n)),s(2,e=F(t,a)),"count"in n&&s(0,o=n.count),"open"in n&&s(1,c=n.open)},[o,c,e,function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)}]}class sn extends t{constructor(n){super(),s(this,n,tn,X,a,{count:0,open:1})}}function an(n){let t,s,a,o,p;const l=n[4].default,u=e(l,n,n[3],null);let k=[n[2],{class:s="bx--accordion--"+n[0]+" "+n[2].class}],m={};for(let n=0;n{l[o]=null}),U(),s=l[t],s||(s=l[t]=p[t](n),s.c()),A(s,1),s.m(a.parentNode,a))},i(n){e||(A(s),e=!0)},o(n){b(s),e=!1},d(n){l[t].d(n),n&&$(a)}}}function cn(n,t,s){const a=["align","skeleton"];let e=F(t,a),{$$slots:o={},$$scope:c}=t,{align:p="end"}=t,{skeleton:l=!1}=t;return n.$$set=n=>{t=d(d({},t),C(n)),s(2,e=F(t,a)),"align"in n&&s(0,p=n.align),"skeleton"in n&&s(1,l=n.skeleton),"$$scope"in n&&s(3,c=n.$$scope)},[p,l,e,c,o,function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)}]}class pn extends t{constructor(n){super(),s(this,n,cn,on,a,{align:0,skeleton:1})}}const ln=n=>({}),rn=n=>({});function un(n){let t,s,a,o,p,g,C,I,R,M,U;a=new K({props:{class:"bx--accordion__arrow","aria-label":n[2]}});const B=n[6].title,N=e(B,n,n[5],rn),F=N||function(n){let t;return{c(){t=l(n[1])},l(s){t=u(s,n[1])},m(n,s){c(n,t,s)},p(n,s){2&s&&m(t,n[1])},d(n){n&&$(t)}}}(n),P=n[6].default,V=e(P,n,n[5],null);let Y=[{class:I="bx--accordion__item--$"+n[3]},n[4]],z={};for(let n=0;n{t=d(d({},t),C(n)),s(4,e=F(t,a)),"title"in n&&s(1,p=n.title),"open"in n&&s(0,l=n.open),"iconDescription"in n&&s(2,i=n.iconDescription),"$$scope"in n&&s(5,c=n.$$scope)},s(3,r=void 0),[l,p,i,r,e,c,o,function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)},function(t){I(n,t)},()=>{s(0,l=!l),s(3,r=l?"expanding":"collapsing")},({key:n})=>{l&&"Escape"===n&&s(0,l=!1)},()=>{s(3,r=void 0)}]}class kn extends t{constructor(n){super(),s(this,n,$n,un,a,{title:1,open:0,iconDescription:2})}}function mn(n){let t;return{c(){t=l("Content 1")},l(n){t=u(n,"Content 1")},m(n,s){c(n,t,s)},d(n){n&&$(t)}}}function dn(n){let t;return{c(){t=l("Content 2")},l(n){t=u(n,"Content 2")},m(n,s){c(n,t,s)},d(n){n&&$(t)}}}function fn(n){let t;return{c(){t=l("Content 3")},l(n){t=u(n,"Content 3")},m(n,s){c(n,t,s)},d(n){n&&$(t)}}}function gn(n){let t,s,a,e,o,p;return t=new kn({props:{title:"Title 1",$$slots:{default:[mn]},$$scope:{ctx:n}}}),a=new kn({props:{title:"Title 2",$$slots:{default:[dn]},$$scope:{ctx:n}}}),o=new kn({props:{title:"Title 3",$$slots:{default:[fn]},$$scope:{ctx:n}}}),{c(){_(t.$$.fragment),s=E(),_(a.$$.fragment),e=E(),_(o.$$.fragment)},l(n){T(t.$$.fragment,n),s=j(n),T(a.$$.fragment,n),e=j(n),T(o.$$.fragment,n)},m(n,l){D(t,n,l),c(n,s,l),D(a,n,l),c(n,e,l),D(o,n,l),p=!0},p(n,s){const e={};1&s&&(e.$$scope={dirty:s,ctx:n}),t.$set(e);const c={};1&s&&(c.$$scope={dirty:s,ctx:n}),a.$set(c);const p={};1&s&&(p.$$scope={dirty:s,ctx:n}),o.$set(p)},i(n){p||(A(t.$$.fragment,n),A(a.$$.fragment,n),A(o.$$.fragment,n),p=!0)},o(n){b(t.$$.fragment,n),b(a.$$.fragment,n),b(o.$$.fragment,n),p=!1},d(n){S(t,n),n&&$(s),S(a,n),n&&$(e),S(o,n)}}}function hn(n){let t,s;return t=new pn({props:{$$slots:{default:[gn]},$$scope:{ctx:n}}}),{c(){_(t.$$.fragment)},l(n){T(t.$$.fragment,n)},m(n,a){D(t,n,a),s=!0},p(n,s){const a={};1&s&&(a.$$scope={dirty:s,ctx:n}),t.$set(a)},i(n){s||(A(t.$$.fragment,n),s=!0)},o(n){b(t.$$.fragment,n),s=!1},d(n){S(t,n)}}}function xn(n){let t;return{c(){t=l("Content 1")},l(n){t=u(n,"Content 1")},m(n,s){c(n,t,s)},d(n){n&&$(t)}}}function vn(n){let t;return{c(){t=l("Content 2")},l(n){t=u(n,"Content 2")},m(n,s){c(n,t,s)},d(n){n&&$(t)}}}function An(n){let t;return{c(){t=l("Content 3")},l(n){t=u(n,"Content 3")},m(n,s){c(n,t,s)},d(n){n&&$(t)}}}function bn(n){let t,s,a,e,o,p;return t=new kn({props:{title:"Title 1",$$slots:{default:[xn]},$$scope:{ctx:n}}}),a=new kn({props:{title:"Title 2",$$slots:{default:[vn]},$$scope:{ctx:n}}}),o=new kn({props:{title:"Title 3",$$slots:{default:[An]},$$scope:{ctx:n}}}),{c(){_(t.$$.fragment),s=E(),_(a.$$.fragment),e=E(),_(o.$$.fragment)},l(n){T(t.$$.fragment,n),s=j(n),T(a.$$.fragment,n),e=j(n),T(o.$$.fragment,n)},m(n,l){D(t,n,l),c(n,s,l),D(a,n,l),c(n,e,l),D(o,n,l),p=!0},p(n,s){const e={};1&s&&(e.$$scope={dirty:s,ctx:n}),t.$set(e);const c={};1&s&&(c.$$scope={dirty:s,ctx:n}),a.$set(c);const p={};1&s&&(p.$$scope={dirty:s,ctx:n}),o.$set(p)},i(n){p||(A(t.$$.fragment,n),A(a.$$.fragment,n),A(o.$$.fragment,n),p=!0)},o(n){b(t.$$.fragment,n),b(a.$$.fragment,n),b(o.$$.fragment,n),p=!1},d(n){S(t,n),n&&$(s),S(a,n),n&&$(e),S(o,n)}}}function wn(n){let t,s;return t=new pn({props:{align:"start",$$slots:{default:[bn]},$$scope:{ctx:n}}}),{c(){_(t.$$.fragment)},l(n){T(t.$$.fragment,n)},m(n,a){D(t,n,a),s=!0},p(n,s){const a={};1&s&&(a.$$scope={dirty:s,ctx:n}),t.$set(a)},i(n){s||(A(t.$$.fragment,n),s=!0)},o(n){b(t.$$.fragment,n),s=!1},d(n){S(t,n)}}}function Cn(n){let t,s;return{c(){t=y("h5"),s=l("Custom title slot"),this.h()},l(n){t=i(n,"H5",{slot:!0,style:!0});var a=r(t);s=u(a,"Custom title slot"),a.forEach($),this.h()},h(){f(t,"slot","title"),V(t,"color","red")},m(n,a){c(n,t,a),k(t,s)},d(n){n&&$(t)}}}function In(n){let t;return{c(){t=l("\n Content 1")},l(n){t=u(n,"\n Content 1")},m(n,s){c(n,t,s)},p:R,d(n){n&&$(t)}}}function yn(n){let t;return{c(){t=l("Content 2")},l(n){t=u(n,"Content 2")},m(n,s){c(n,t,s)},d(n){n&&$(t)}}}function _n(n){let t;return{c(){t=l("Content 3")},l(n){t=u(n,"Content 3")},m(n,s){c(n,t,s)},d(n){n&&$(t)}}}function En(n){let t,s,a,e,o,p;return t=new kn({props:{$$slots:{default:[In],title:[Cn]},$$scope:{ctx:n}}}),a=new kn({props:{title:"Title 2",$$slots:{default:[yn]},$$scope:{ctx:n}}}),o=new kn({props:{title:"Title 3",$$slots:{default:[_n]},$$scope:{ctx:n}}}),{c(){_(t.$$.fragment),s=E(),_(a.$$.fragment),e=E(),_(o.$$.fragment)},l(n){T(t.$$.fragment,n),s=j(n),T(a.$$.fragment,n),e=j(n),T(o.$$.fragment,n)},m(n,l){D(t,n,l),c(n,s,l),D(a,n,l),c(n,e,l),D(o,n,l),p=!0},p(n,s){const e={};1&s&&(e.$$scope={dirty:s,ctx:n}),t.$set(e);const c={};1&s&&(c.$$scope={dirty:s,ctx:n}),a.$set(c);const p={};1&s&&(p.$$scope={dirty:s,ctx:n}),o.$set(p)},i(n){p||(A(t.$$.fragment,n),A(a.$$.fragment,n),A(o.$$.fragment,n),p=!0)},o(n){b(t.$$.fragment,n),b(a.$$.fragment,n),b(o.$$.fragment,n),p=!1},d(n){S(t,n),n&&$(s),S(a,n),n&&$(e),S(o,n)}}}function Tn(n){let t,s;return t=new pn({props:{$$slots:{default:[En]},$$scope:{ctx:n}}}),{c(){_(t.$$.fragment)},l(n){T(t.$$.fragment,n)},m(n,a){D(t,n,a),s=!0},p(n,s){const a={};1&s&&(a.$$scope={dirty:s,ctx:n}),t.$set(a)},i(n){s||(A(t.$$.fragment,n),s=!0)},o(n){b(t.$$.fragment,n),s=!1},d(n){S(t,n)}}}function jn(n){let t;return{c(){t=l("Content 1")},l(n){t=u(n,"Content 1")},m(n,s){c(n,t,s)},d(n){n&&$(t)}}}function Ln(n){let t;return{c(){t=l("Content 2")},l(n){t=u(n,"Content 2")},m(n,s){c(n,t,s)},d(n){n&&$(t)}}}function Dn(n){let t;return{c(){t=l("Content 3")},l(n){t=u(n,"Content 3")},m(n,s){c(n,t,s)},d(n){n&&$(t)}}}function Sn(n){let t,s,a,e,o,p;return t=new kn({props:{title:"Title 1",open:!0,$$slots:{default:[jn]},$$scope:{ctx:n}}}),a=new kn({props:{title:"Title 2",$$slots:{default:[Ln]},$$scope:{ctx:n}}}),o=new kn({props:{title:"Title 3",$$slots:{default:[Dn]},$$scope:{ctx:n}}}),{c(){_(t.$$.fragment),s=E(),_(a.$$.fragment),e=E(),_(o.$$.fragment)},l(n){T(t.$$.fragment,n),s=j(n),T(a.$$.fragment,n),e=j(n),T(o.$$.fragment,n)},m(n,l){D(t,n,l),c(n,s,l),D(a,n,l),c(n,e,l),D(o,n,l),p=!0},p(n,s){const e={};1&s&&(e.$$scope={dirty:s,ctx:n}),t.$set(e);const c={};1&s&&(c.$$scope={dirty:s,ctx:n}),a.$set(c);const p={};1&s&&(p.$$scope={dirty:s,ctx:n}),o.$set(p)},i(n){p||(A(t.$$.fragment,n),A(a.$$.fragment,n),A(o.$$.fragment,n),p=!0)},o(n){b(t.$$.fragment,n),b(a.$$.fragment,n),b(o.$$.fragment,n),p=!1},d(n){S(t,n),n&&$(s),S(a,n),n&&$(e),S(o,n)}}}function Rn(n){let t,s;return t=new pn({props:{$$slots:{default:[Sn]},$$scope:{ctx:n}}}),{c(){_(t.$$.fragment)},l(n){T(t.$$.fragment,n)},m(n,a){D(t,n,a),s=!0},p(n,s){const a={};1&s&&(a.$$scope={dirty:s,ctx:n}),t.$set(a)},i(n){s||(A(t.$$.fragment,n),s=!0)},o(n){b(t.$$.fragment,n),s=!1},d(n){S(t,n)}}}function Hn(n){let t,s;return t=new pn({props:{skeleton:!0,count:3}}),{c(){_(t.$$.fragment)},l(n){T(t.$$.fragment,n)},m(n,a){D(t,n,a),s=!0},p:R,i(n){s||(A(t.$$.fragment,n),s=!0)},o(n){b(t.$$.fragment,n),s=!1},d(n){S(t,n)}}}function Mn(n){let t,s;return t=new pn({props:{skeleton:!0,open:!1,count:3}}),{c(){_(t.$$.fragment)},l(n){T(t.$$.fragment,n)},m(n,a){D(t,n,a),s=!0},p:R,i(n){s||(A(t.$$.fragment,n),s=!0)},o(n){b(t.$$.fragment,n),s=!1},d(n){S(t,n)}}}function Un(n){let t,s,a,e,o,p,m,d,g,h,x,v,A,b,w,C,I,_,T,L,D,S,R,H,M,U,B,N,F,P;return{c(){t=y("div"),s=y("ul"),a=y("li"),e=y("a"),o=l("Usage"),p=E(),m=y("ul"),d=y("li"),g=y("a"),h=l("Default"),x=E(),v=y("li"),A=y("a"),b=l("Chevron aligned left"),w=E(),C=y("li"),I=y("a"),_=l("Custom title slot"),T=E(),L=y("li"),D=y("a"),S=l("First item open"),R=E(),H=y("li"),M=y("a"),U=l("Skeleton"),B=E(),N=y("li"),F=y("a"),P=l("Skeleton (closed)"),this.h()},l(n){t=i(n,"DIV",{slot:!0});var c=r(t);s=i(c,"UL",{class:!0});var l=r(s);a=i(l,"LI",{class:!0});var k=r(a);e=i(k,"A",{class:!0,href:!0});var f=r(e);o=u(f,"Usage"),f.forEach($),p=j(k),m=i(k,"UL",{class:!0});var y=r(m);d=i(y,"LI",{class:!0});var E=r(d);g=i(E,"A",{class:!0,href:!0});var V=r(g);h=u(V,"Default"),V.forEach($),E.forEach($),x=j(y),v=i(y,"LI",{class:!0});var Y=r(v);A=i(Y,"A",{class:!0,href:!0});var z=r(A);b=u(z,"Chevron aligned left"),z.forEach($),Y.forEach($),w=j(y),C=i(y,"LI",{class:!0});var O=r(C);I=i(O,"A",{class:!0,href:!0});var q=r(I);_=u(q,"Custom title slot"),q.forEach($),O.forEach($),T=j(y),L=i(y,"LI",{class:!0});var G=r(L);D=i(G,"A",{class:!0,href:!0});var J=r(D);S=u(J,"First item open"),J.forEach($),G.forEach($),R=j(y),H=i(y,"LI",{class:!0});var K=r(H);M=i(K,"A",{class:!0,href:!0});var Z=r(M);U=u(Z,"Skeleton"),Z.forEach($),K.forEach($),B=j(y),N=i(y,"LI",{class:!0});var Q=r(N);F=i(Q,"A",{class:!0,href:!0});var W=r(F);P=u(W,"Skeleton (closed)"),W.forEach($),Q.forEach($),y.forEach($),k.forEach($),l.forEach($),c.forEach($),this.h()},h(){f(e,"class","bx--link"),f(e,"href","#usage"),f(g,"class","bx--link"),f(g,"href","#default"),f(d,"class","bx--list__item"),f(A,"class","bx--link"),f(A,"href","#chevron-aligned-left"),f(v,"class","bx--list__item"),f(I,"class","bx--link"),f(I,"href","#custom-title-slot"),f(C,"class","bx--list__item"),f(D,"class","bx--link"),f(D,"href","#first-item-open"),f(L,"class","bx--list__item"),f(M,"class","bx--link"),f(M,"href","#skeleton"),f(H,"class","bx--list__item"),f(F,"class","bx--link"),f(F,"href","#skeleton-closed"),f(N,"class","bx--list__item"),f(m,"class","bx--list--unordered bx--list--nested"),f(a,"class","bx--list__item"),f(s,"class","bx--list--unordered"),f(t,"slot","aside")},m(n,l){c(n,t,l),k(t,s),k(s,a),k(a,e),k(e,o),k(a,p),k(a,m),k(m,d),k(d,g),k(g,h),k(m,x),k(m,v),k(v,A),k(A,b),k(m,w),k(m,C),k(C,I),k(I,_),k(m,T),k(m,L),k(L,D),k(D,S),k(m,R),k(m,H),k(H,M),k(M,U),k(m,B),k(m,N),k(N,F),k(F,P)},d(n){n&&$(t)}}}function Bn(n){let t,s,a,e,o,p,m,d,g,h,x,v,w,C,I,L,R,H,M,U,B,N,F,P,V,Y,z,q,G,J,K;return e=new O({props:{codeRaw:' + \ No newline at end of file diff --git a/components/Breadcrumb/index.html b/components/Breadcrumb/index.html index 1c9d14af..dd24686f 100644 --- a/components/Breadcrumb/index.html +++ b/components/Breadcrumb/index.html @@ -2,13 +2,36 @@ - Carbon Components Svelte + Breadcrumb - - -
+ + +

Breadcrumb

Source code
Table of Contents

Usage

Default

<script>
+  import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
+</script>
+
+<Breadcrumb>
+  <BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
+  <BreadcrumbItem href="/reports">Annual reports</BreadcrumbItem>
+  <BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
+</Breadcrumb>
+

No trailing slash

<script>
+  import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
+</script>
+
+<Breadcrumb noTrailingSlash>
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
+</Breadcrumb>
+

Skeleton

 
 
  
<script>
+  import { Breadcrumb } from "carbon-components-svelte";
+</script>
+
+<Breadcrumb skeleton count={3} />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Button/index.html b/components/Button/index.html index 1c9d14af..cdbd3c48 100644 --- a/components/Button/index.html +++ b/components/Button/index.html @@ -2,13 +2,97 @@ - Carbon Components Svelte + Button - - -
+ + +

Button

Source code
Table of Contents

Usage

Primary button

<script>
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button>Primary button</Button>
+

Secondary button

<script>
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button kind="secondary">Secondary button</Button>
+

Tertiary button

<script>
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button kind="tertiary">Tertiary button</Button>
+

Ghost button

<script>
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button kind="ghost">Ghost button</Button>
+

Danger button

<script>
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button kind="danger">Danger button</Button>
+

Button with icon

<script>
+  import { Button } from "carbon-components-svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
+</script>
+
+<Button icon={Add16}>With icon</Button>
+

Icon-only button

<script>
+  import { Button } from "carbon-components-svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
+</script>
+
+<Button
+  icon={Add16}
+  hasIconOnly
+  tooltipPosition="bottom"
+  tooltipAlignment="center"
+  iconDescription="Tooltip text"
+/>
+
Link button 
<script>
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button href="#">Link button</Button>
+

Custom element

Custom element

<script>
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button as let:props>
+  <p {...props}>Custom element</p>
+</Button>
+

Field button

<script>
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button size="field">Primary</Button>
+<Button size="field" kind="secondary">Secondary</Button>
+<Button size="field" kind="tertiary">Tertiary</Button>
+<Button size="field" kind="ghost">Ghost</Button>
+<Button size="field" kind="danger">Danger</Button>
+

Small button

<script>
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button size="small">Primary</Button>
+<Button size="small" kind="secondary">Secondary</Button>
+<Button size="small" kind="tertiary">Tertiary</Button>
+<Button size="small" kind="ghost">Ghost</Button>
+<Button size="small" kind="danger">Danger</Button>
+

Disabled button

<script>
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button disabled>Disabled button</Button>
+

Skeleton

<script>
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button skeleton />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/ButtonSet/index.html b/components/ButtonSet/index.html index 1c9d14af..e2cc0ae9 100644 --- a/components/ButtonSet/index.html +++ b/components/ButtonSet/index.html @@ -2,13 +2,30 @@ - Carbon Components Svelte + ButtonSet - - -
+ + +

ButtonSet

Source code
Table of Contents

Usage

Default (juxtaposed)

<script>
+  import { ButtonSet, Button } from "carbon-components-svelte";
+</script>
+
+<ButtonSet>
+  <Button kind="secondary">Cancel</Button>
+  <Button>Submit</Button>
+</ButtonSet>
+

Stacked

<script>
+  import { ButtonSet, Button } from "carbon-components-svelte";
+</script>
+
+<ButtonSet stacked>
+  <Button>Login</Button>
+  <Button kind="ghost">Sign up</Button>
+</ButtonSet>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Checkbox/index.html b/components/Checkbox/index.html index 1c9d14af..cc64e77a 100644 --- a/components/Checkbox/index.html +++ b/components/Checkbox/index.html @@ -2,13 +2,44 @@ - Carbon Components Svelte + Checkbox - - -
+ + +

Checkbox

Source code
Table of Contents

Usage

Default (unchecked)

<script>
+  import { Checkbox } from "carbon-components-svelte";
+</script>
+
+<Checkbox labelText="Label text" />
+

Checked

<script>
+  import { Checkbox } from "carbon-components-svelte";
+</script>
+
+<Checkbox labelText="Label text" checked />
+

Indeterminate

<script>
+  import { Checkbox } from "carbon-components-svelte";
+</script>
+
+<Checkbox labelText="Label text" indeterminate />
+

Hidden label

<script>
+  import { Checkbox } from "carbon-components-svelte";
+</script>
+
+<Checkbox labelText="Label text" hideLabel />
+

Disabled

<script>
+  import { Checkbox } from "carbon-components-svelte";
+</script>
+
+<Checkbox labelText="Label text" disabled />
+

Skeleton

<script>
+  import { Checkbox } from "carbon-components-svelte";
+</script>
+
+<Checkbox skeleton />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/ClickableTile/index.html b/components/ClickableTile/index.html index 1c9d14af..920423ae 100644 --- a/components/ClickableTile/index.html +++ b/components/ClickableTile/index.html @@ -2,13 +2,28 @@ - Carbon Components Svelte + ClickableTile - - -
+ + +

ClickableTile

Source code
Table of Contents

Usage

Default

Carbon Design System
<script>
+  import { ClickableTile } from "carbon-components-svelte";
+</script>
+
+<ClickableTile href="https://www.carbondesignsystem.com/">
+  Carbon Design System
+</ClickableTile>
+

Light variant

Carbon Design System
<script>
+  import { ClickableTile } from "carbon-components-svelte";
+</script>
+
+<ClickableTile light href="https://www.carbondesignsystem.com/">
+  Carbon Design System
+</ClickableTile>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/CodeSnippet/index.html b/components/CodeSnippet/index.html index 1c9d14af..bb261846 100644 --- a/components/CodeSnippet/index.html +++ b/components/CodeSnippet/index.html @@ -2,13 +2,71 @@ - Carbon Components Svelte + CodeSnippet - - -
+ + +

CodeSnippet

Source code
Table of Contents

Usage

Default (single-line)

yarn add -D carbon-components-svelte
<script>
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
+

Inline

<script>
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
+

Multi-line

// helpers.js
+  
+export function multiply(a: number, b: number) {
+  return a * b;
+}
+
+export function divide(a: number, b: number) {
+  return a / b;
+}
+
+export function add(a: number, b: number) {
+  return a + b;
+}
+
+export function subtract(a: number, b: number) {
+  return a - b;
+}
<script>
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet type="multi" {code} />
+

Hidden copy button

// helpers.js
+  
+export function multiply(a: number, b: number) {
+  return a * b;
+}
+
+export function divide(a: number, b: number) {
+  return a / b;
+}
+
+export function add(a: number, b: number) {
+  return a + b;
+}
+
+export function subtract(a: number, b: number) {
+  return a - b;
+}
<script>
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet type="multi" {code} hideCopyButton />
+

Skeleton

<script>
+  import { CodeSnippet } from "carbon-components-svelte";
+</script>
+
+<CodeSnippet skeleton />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/ComboBox/index.html b/components/ComboBox/index.html index 1c9d14af..109ebc86 100644 --- a/components/ComboBox/index.html +++ b/components/ComboBox/index.html @@ -2,13 +2,63 @@ - Carbon Components Svelte + ComboBox - - -
+ + +

ComboBox

Source code
Table of Contents

Usage

Default

<script>
+  import { ComboBox } from "carbon-components-svelte";
+</script>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
+/>
+

Selected index

<script>
+  import { ComboBox } from "carbon-components-svelte";
+</script>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  selectedIndex={1}
+  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
+/>
+

Extra-large size

<script>
+  import { ComboBox } from "carbon-components-svelte";
+</script>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  size="xl"
+  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
+/>
+

Small size

<script>
+  import { ComboBox } from "carbon-components-svelte";
+</script>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  size="sm"
+  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
+/>
+

Disabled

<script>
+  import { ComboBox } from "carbon-components-svelte";
+</script>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  disabled
+  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
+/>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/ComposedModal/index.html b/components/ComposedModal/index.html index 1c9d14af..6adde5c3 100644 --- a/components/ComposedModal/index.html +++ b/components/ComposedModal/index.html @@ -2,13 +2,33 @@ - Carbon Components Svelte + ComposedModal - - -
+ + +

ComposedModal

Source code
Table of Contents

Usage

Composed modal

Open in new tab 
<script>
+  import {
+    ComposedModal,
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+    Checkbox,
+  } from "carbon-components-svelte";
+
+  let checked = false;
+</script>
+
+<ComposedModal open>
+  <ModalHeader title="Confirm changes" />
+  <ModalBody hasForm>
+    <Checkbox labelText="I have reviewed the changes" bind:checked />
+  </ModalBody>
+  <ModalFooter primaryButtonText="Proceed" primaryButtonDisabled={!checked} />
+</ComposedModal>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/ContentSwitcher/index.html b/components/ContentSwitcher/index.html index 1c9d14af..46be17b0 100644 --- a/components/ContentSwitcher/index.html +++ b/components/ContentSwitcher/index.html @@ -2,13 +2,54 @@ - Carbon Components Svelte + ContentSwitcher - - -
+ + +

ContentSwitcher

Source code
Table of Contents

Usage

Default

<script>
+  import { ContentSwitcher, Switch } from "carbon-components-svelte";
+</script>
+
+<ContentSwitcher>
+  <Switch text="Switch 1" />
+  <Switch text="Switch 2" />
+  <Switch text="Switch 3" />
+</ContentSwitcher>
+

Light variant

<script>
+  import { ContentSwitcher, Switch } from "carbon-components-svelte";
+</script>
+
+<ContentSwitcher light>
+  <Switch text="Switch 1" />
+  <Switch text="Switch 2" />
+  <Switch text="Switch 3" />
+</ContentSwitcher>
+

Custom switch slot

<script>
+  import { ContentSwitcher, Switch } from "carbon-components-svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
+</script>
+
+<ContentSwitcher>
+  <Switch>
+    <div style="display: flex; align-items: center;">
+      Third section
+      <Add16 style="margin-left: .25rem;" />
+    </div>
+  </Switch>
+  <Switch text="Switch 2" />
+</ContentSwitcher>
+

Disabled

<script>
+  import { ContentSwitcher, Switch } from "carbon-components-svelte";
+</script>
+
+<ContentSwitcher>
+  <Switch text="Switch 1" disabled />
+  <Switch text="Switch 2" disabled />
+</ContentSwitcher>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/CopyButton/index.html b/components/CopyButton/index.html index 1c9d14af..93145188 100644 --- a/components/CopyButton/index.html +++ b/components/CopyButton/index.html @@ -2,13 +2,24 @@ - Carbon Components Svelte + CopyButton - - -
+ + +

CopyButton

Source code
Table of Contents

Usage

Default

<script>
+  import { CopyButton } from "carbon-components-svelte";
+</script>
+
+<CopyButton on:click />
+

Custom feedback

<script>
+  import { CopyButton } from "carbon-components-svelte";
+</script>
+
+<CopyButton on:click feedback="Copied to clipboard" />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/DataTable/index.html b/components/DataTable/index.html index 1c9d14af..7aa753b6 100644 --- a/components/DataTable/index.html +++ b/components/DataTable/index.html @@ -2,13 +2,83 @@ - Carbon Components Svelte + DataTable - - -
+ + +

DataTable

Source code
Table of Contents

Usage

Default

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
+  import { DataTable } from "carbon-components-svelte";
+</script>
+
+<DataTable
+  headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
+  rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
+/>
+

With title, description

Load balancers

Your organization's active load balancers.

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
+  import { DataTable } from "carbon-components-svelte";
+</script>
+
+<DataTable
+  title="Load balancers"
+  description="Your organization's active load balancers."
+  headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
+  rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
+/>
+

Zebra stripes

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
+  import { DataTable } from "carbon-components-svelte";
+</script>
+
+<DataTable
+  zebra
+  headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
+  rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
+/>
+

Short rows

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
+  import { DataTable } from "carbon-components-svelte";
+</script>
+
+<DataTable
+  size="short"
+  headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
+  rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
+/>
+

Compact rows

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
+  import { DataTable } from "carbon-components-svelte";
+</script>
+
+<DataTable
+  size="compact"
+  headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
+  rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
+/>
+

Sortable
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
+  import { DataTable } from "carbon-components-svelte";
+</script>
+
+<DataTable
+  sortable
+  headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
+  rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
+/>
+

Skeleton

 
<script>
+  import { DataTableSkeleton } from "carbon-components-svelte";
+</script>
+
+<DataTableSkeleton />
+

Skeleton with headers, row count

NameProtocolPortRule
 
<script>
+  import { DataTableSkeleton } from "carbon-components-svelte";
+</script>
+
+<DataTableSkeleton headers={['Name', 'Protocol', 'Port', 'Rule']} rows={10} />
+

Skeleton without header, toolbar

 
<script>
+  import { DataTableSkeleton } from "carbon-components-svelte";
+</script>
+
+<DataTableSkeleton showHeader={false} showToolbar={false} />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/DatePicker/index.html b/components/DatePicker/index.html index 1c9d14af..cb495a80 100644 --- a/components/DatePicker/index.html +++ b/components/DatePicker/index.html @@ -2,13 +2,100 @@ - Carbon Components Svelte + DatePicker - - -
+ + +

DatePicker

Source code
Table of Contents

Usage

Default (simple)

<script>
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker>
+  <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
+</DatePicker>
+

Hidden label

<script>
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker>
+  <DatePickerInput
+    hideLabel
+    labelText="Date of birth"
+    placeholder="mm/dd/yyyy"
+  />
+</DatePicker>
+

Light variant

<script>
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker light>
+  <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
+</DatePicker>
+

Extra-large size

<script>
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker>
+  <DatePickerInput
+    size="xl"
+    labelText="Date of birth"
+    placeholder="mm/dd/yyyy"
+  />
+</DatePicker>
+

Small size

<script>
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker>
+  <DatePickerInput
+    size="sm"
+    labelText="Date of birth"
+    placeholder="mm/dd/yyyy"
+  />
+</DatePicker>
+

Invalid state

Invalid date
<script>
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker>
+  <DatePickerInput
+    invalid
+    invalidText="Invalid date"
+    labelText="Date of birth"
+    placeholder="mm/dd/yyyy"
+  />
+</DatePicker>
+

Disabled state

<script>
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker>
+  <DatePickerInput
+    disabled
+    labelText="Date of birth"
+    placeholder="mm/dd/yyyy"
+  />
+</DatePicker>
+

Single

<script>
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker datePickerType="single">
+  <DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
+</DatePicker>
+

Skeleton

<script>
+  import { DatePickerSkeleton } from "carbon-components-svelte";
+</script>
+
+<DatePickerSkeleton />
+
Table of Contents
- + - \ No newline at end of file +
+ + SunMonTueWedThuFriSat + +
27282930123456789101112131415161718192021222324252627282930311234567
\ No newline at end of file diff --git a/components/Dropdown/index.html b/components/Dropdown/index.html index 1c9d14af..b0adade3 100644 --- a/components/Dropdown/index.html +++ b/components/Dropdown/index.html @@ -2,13 +2,58 @@ - Carbon Components Svelte + Dropdown - - -
+ + +

Dropdown

Source code
Table of Contents

Usage

Default

<script>
+  import { Dropdown } from "carbon-components-svelte";
+</script>
+
+<Dropdown
+  titleText="Contact"
+  selectedIndex={0}
+  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
+/>
+

Light variant

<script>
+  import { Dropdown } from "carbon-components-svelte";
+</script>
+
+<Dropdown
+  light
+  titleText="Contact"
+  selectedIndex={0}
+  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
+/>
+

Inline type

<script>
+  import { Dropdown } from "carbon-components-svelte";
+</script>
+
+<Dropdown
+  type="inline"
+  titleText="Contact"
+  selectedIndex={0}
+  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
+/>
+

Disabled state

<script>
+  import { Dropdown } from "carbon-components-svelte";
+</script>
+
+<Dropdown
+  disabled
+  titleText="Contact"
+  selectedIndex={0}
+  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
+/>
+

Skeleton

<script>
+  import { DropdownSkeleton } from "carbon-components-svelte";
+</script>
+
+<DropdownSkeleton />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/ExpandableTile/index.html b/components/ExpandableTile/index.html index 1c9d14af..d011ee44 100644 --- a/components/ExpandableTile/index.html +++ b/components/ExpandableTile/index.html @@ -2,13 +2,38 @@ - Carbon Components Svelte + ExpandableTile - - -
+ + +

ExpandableTile

Source code
Table of Contents

Usage

Default (unexpanded)

Above the fold content here
Below the fold content here
<script>
+  import { ExpandableTile } from "carbon-components-svelte";
+</script>
+
+<ExpandableTile>
+  <div slot="above" style="height: 10rem">Above the fold content here</div>
+  <div slot="below" style="height: 10rem">Below the fold content here</div>
+</ExpandableTile>
+

Expanded

Above the fold content here
Below the fold content here
<script>
+  import { ExpandableTile } from "carbon-components-svelte";
+</script>
+
+<ExpandableTile expanded>
+  <div slot="above" style="height: 10rem">Above the fold content here</div>
+  <div slot="below" style="height: 10rem">Below the fold content here</div>
+</ExpandableTile>
+

Light variant

Above the fold content here
Below the fold content here
<script>
+  import { ExpandableTile } from "carbon-components-svelte";
+</script>
+
+<ExpandableTile light>
+  <div slot="above" style="height: 10rem">Above the fold content here</div>
+  <div slot="below" style="height: 10rem">Below the fold content here</div>
+</ExpandableTile>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/FileUploader/index.html b/components/FileUploader/index.html index 1c9d14af..0c8f94ce 100644 --- a/components/FileUploader/index.html +++ b/components/FileUploader/index.html @@ -2,13 +2,59 @@ - Carbon Components Svelte + FileUploader - - -
+ + +

FileUploader

Source code
Table of Contents

Usage

File uploader (button-only)

<script>
+  import { FileUploaderButton } from "carbon-components-svelte";
+</script>
+
+<FileUploaderButton labelText="Add files" />
+

File uploader

Upload files

Only JPEG files are accepted.

<script>
+  import { FileUploader } from "carbon-components-svelte";
+</script>
+
+<FileUploader
+  multiple
+  labelTitle="Upload files"
+  buttonLabel="Add files"
+  labelDescription="Only JPEG files are accepted."
+  accept={['.jpg', '.jpeg']}
+  status="complete"
+/>
+

Item (uploading)

README.md

 
<script>
+  import { FileUploaderItem } from "carbon-components-svelte";
+</script>
+
+<FileUploaderItem name="README.md" status="uploading" />
+

Item (complete)

README.md

<script>
+  import { FileUploaderItem } from "carbon-components-svelte";
+</script>
+
+<FileUploaderItem name="README.md" status="complete" />
+

Item (invalid)

README.md

<script>
+  import { FileUploaderItem } from "carbon-components-svelte";
+</script>
+
+<FileUploaderItem invalid name="README.md" status="edit" />
+

Drop container

<script>
+  import { FileUploaderDropContainer } from "carbon-components-svelte";
+</script>
+
+<FileUploaderDropContainer
+  labelText="Drag and drop files here or click to upload"
+  multiple
+/>
+

Skeleton

<script>
+  import { FileUploaderSkeleton } from "carbon-components-svelte";
+</script>
+
+<FileUploaderSkeleton />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/FluidForm/index.html b/components/FluidForm/index.html index 1c9d14af..fdc0843a 100644 --- a/components/FluidForm/index.html +++ b/components/FluidForm/index.html @@ -2,13 +2,31 @@ - Carbon Components Svelte + FluidForm - - -
+ + +

FluidForm

Source code
Table of Contents

Usage

Fluid form

<script>
+  import {
+    FluidForm,
+    TextInput,
+    PasswordInput,
+  } from "carbon-components-svelte";
+</script>
+
+<FluidForm>
+  <TextInput labelText="User name" placeholder="Enter user name..." required />
+  <PasswordInput
+    required
+    type="password"
+    labelText="Password"
+    placeholder="Enter password..."
+  />
+</FluidForm>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Form/index.html b/components/Form/index.html index 1c9d14af..898ce10c 100644 --- a/components/Form/index.html +++ b/components/Form/index.html @@ -2,13 +2,68 @@ - Carbon Components Svelte + Form - - -
+ + +

Form

Source code
Table of Contents

Usage

Form

Checkboxes
Radio buttons 
<script>
+  import {
+    Form,
+    FormGroup,
+    Checkbox,
+    RadioButtonGroup,
+    RadioButton,
+    Select,
+    SelectItem,
+    Button,
+  } from "carbon-components-svelte";
+</script>
+
+<Form on:submit>
+  <FormGroup legendText="Checkboxes">
+    <Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
+    <Checkbox id="checkbox-1" labelText="Checkbox Label" />
+    <Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
+  </FormGroup>
+  <FormGroup legendText="Radio buttons">
+    <RadioButtonGroup name="radio-button-group" selected="default-selected">
+      <RadioButton
+        id="radio-1"
+        value="standard"
+        labelText="Standard Radio Button"
+      />
+      <RadioButton
+        id="radio-2"
+        value="default-selected"
+        labelText="Default Selected Radio Button"
+      />
+      <RadioButton
+        id="radio-4"
+        value="disabled"
+        labelText="Disabled Radio Button"
+        disabled
+      />
+    </RadioButtonGroup>
+  </FormGroup>
+  <FormGroup>
+    <Select id="select-1" labelText="Select menu" value="placeholder-item">
+      <SelectItem
+        disabled
+        hidden
+        value="placeholder-item"
+        text="Choose an option"
+      />
+      <SelectItem value="option-1" text="Option 1" />
+      <SelectItem value="option-2" text="Option 2" />
+      <SelectItem value="option-3" text="Option 3" />
+    </Select>
+  </FormGroup>
+  <Button type="submit">Submit</Button>
+</Form>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Grid/index.html b/components/Grid/index.html index 1c9d14af..75c87db9 100644 --- a/components/Grid/index.html +++ b/components/Grid/index.html @@ -2,13 +2,154 @@ - Carbon Components Svelte + Grid - - -
+ + +

Grid

Source code
Table of Contents

Usage

Default

Open in new tab 
<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid>
+  <Row>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+</Grid>
+

Full width

Open in new tab 
<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid fullWidth>
+  <Row>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+</Grid>
+

Narrow

Open in new tab 
<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid narrow>
+  <Row>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+</Grid>
+

Condensed

Open in new tab 
<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid condensed>
+  <Row>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+</Grid>
+

Responsive

Open in new tab 
<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid>
+  <Row>
+    <Column
+      sm={1}
+      md={4}
+      lg={8}
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      sm: 1, md: 4, lg: 8
+    </Column>
+    <Column
+      sm={1}
+      md={2}
+      lg={2}
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      sm: 1, md: 2, lg: 2
+    </Column>
+    <Column
+      sm={1}
+      md={1}
+      lg={1}
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      sm: 1, md: 1, lg: 1
+    </Column>
+    <Column
+      sm={1}
+      md={1}
+      lg={1}
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      sm: 1, md: 1, lg: 1
+    </Column>
+  </Row>
+</Grid>
+

Offset columns

Open in new tab 
<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid>
+  <Row>
+    <Column
+      sm={{ span: 1, offset: 3 }}
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      Offset 3
+    </Column>
+    <Column
+      sm={{ span: 2, offset: 2 }}
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      Offset 2
+    </Column>
+    <Column
+      sm={{ span: 3, offset: 1 }}
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      Offset 1
+    </Column>
+    <Column
+      sm={{ span: 4, offset: 0 }}
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      Offset 0
+    </Column>
+  </Row>
+</Grid>
+

Aspect ratio columns

Open in new tab 
<script>
+  import { Grid, Row, Column } from "carbon-components-svelte";
+</script>
+
+<Grid>
+  <Row>
+    <Column
+      aspectRatio="2x1"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      2x1
+    </Column>
+    <Column
+      aspectRatio="2x1"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      2x1
+    </Column>
+  </Row>
+</Grid>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Icon/index.html b/components/Icon/index.html index 1c9d14af..2bc5e2ee 100644 --- a/components/Icon/index.html +++ b/components/Icon/index.html @@ -2,13 +2,38 @@ - Carbon Components Svelte + Icon - - -
+ + +

Icon

Source code
Table of Contents

Usage

Default

<script>
+  import { Icon } from "carbon-components-svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
+  import Add20 from "carbon-icons-svelte/lib/Add20";
+  import Add24 from "carbon-icons-svelte/lib/Add24";
+  import Add32 from "carbon-icons-svelte/lib/Add32";
+</script>
+
+<Icon render={Add16} />
+<Icon render={Add20} />
+<Icon render={Add24} />
+<Icon render={Add32} />
+

Skeleton

<script>
+  import { Icon } from "carbon-components-svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
+  import Add20 from "carbon-icons-svelte/lib/Add20";
+  import Add24 from "carbon-icons-svelte/lib/Add24";
+  import Add32 from "carbon-icons-svelte/lib/Add32";
+</script>
+
+<Icon skeleton render={Add16} />
+<Icon skeleton size={20} render={Add20} />
+<Icon skeleton size={24} render={Add24} />
+<Icon skeleton size={32} render={Add32} />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/InlineLoading/index.html b/components/InlineLoading/index.html index 1c9d14af..a91e75fe 100644 --- a/components/InlineLoading/index.html +++ b/components/InlineLoading/index.html @@ -2,13 +2,32 @@ - Carbon Components Svelte + InlineLoading - - -
+ + +

InlineLoading

Source code
Table of Contents

Usage

Default

Active loading indicator
<script>
+  import { InlineLoading } from "carbon-components-svelte";
+</script>
+
+<InlineLoading />
+

With description

Active loading indicator
Loading metrics...
<script>
+  import { InlineLoading } from "carbon-components-svelte";
+</script>
+
+<InlineLoading description="Loading metrics..." />
+

Status states

Active loading indicator
Active loading indicator
<script>
+  import { InlineLoading } from "carbon-components-svelte";
+</script>
+
+<InlineLoading status="active" />
+<InlineLoading status="inactive" />
+<InlineLoading status="finished" />
+<InlineLoading status="error" />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/InlineNotification/index.html b/components/InlineNotification/index.html index 1c9d14af..2caa0a94 100644 --- a/components/InlineNotification/index.html +++ b/components/InlineNotification/index.html @@ -2,13 +2,74 @@ - Carbon Components Svelte + InlineNotification - - -
+ + +

InlineNotification

Source code
Table of Contents

Usage

Default (error)

<script>
+  import { InlineNotification } from "carbon-components-svelte";
+</script>
+
+<InlineNotification on:close />
+

Hidden close button

<script>
+  import { InlineNotification } from "carbon-components-svelte";
+</script>
+
+<InlineNotification
+  hideCloseButton
+  kind="warning"
+  title="Upcoming scheduled maintenance"
+/>
+

With actions

<script>
+  import {
+    InlineNotification,
+    NotificationActionButton,
+  } from "carbon-components-svelte";
+</script>
+
+<InlineNotification kind="warning" title="Upcoming scheduled maintenance">
+  <div slot="actions">
+    <NotificationActionButton>Learn more</NotificationActionButton>
+  </div>
+</InlineNotification>
+

Notification variants

<script>
+  import { InlineNotification } from "carbon-components-svelte";
+</script>
+
+<InlineNotification kind="error" />
+<InlineNotification kind="info" />
+<InlineNotification kind="info-square" />
+<InlineNotification kind="success" />
+<InlineNotification kind="warning" />
+<InlineNotification kind="warning-alt" />
+

Low contrast

<script>
+  import { InlineNotification } from "carbon-components-svelte";
+</script>
+
+<InlineNotification lowContrast kind="error" />
+<InlineNotification lowContrast kind="info" />
+<InlineNotification lowContrast kind="info-square" />
+<InlineNotification lowContrast kind="success" />
+<InlineNotification lowContrast kind="warning" />
+<InlineNotification lowContrast kind="warning-alt" />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Link/index.html b/components/Link/index.html index 1c9d14af..945bd95b 100644 --- a/components/Link/index.html +++ b/components/Link/index.html @@ -2,13 +2,44 @@ - Carbon Components Svelte + Link - - -
+ + +

Link

Source code
Table of Contents

Usage

Default

Carbon Design System
<script>
+  import { Link } from "carbon-components-svelte";
+</script>
+
+<Link href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
+

Inline variant

<script>
+  import { Link } from "carbon-components-svelte";
+</script>
+
+<div>
+  Visit the
+  <Link inline href="https://www.carbondesignsystem.com/">
+    Carbon Design System
+  </Link>.
+</div>
+

Disabled

Carbon Design System

<script>
+  import { Link } from "carbon-components-svelte";
+</script>
+
+<Link disabled href="https://www.carbondesignsystem.com/">
+  Carbon Design System
+</Link>
+

Visited styles

Carbon Design System
<script>
+  import { Link } from "carbon-components-svelte";
+</script>
+
+<Link visited href="https://www.carbondesignsystem.com/">
+  Carbon Design System
+</Link>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Loading/index.html b/components/Loading/index.html index 1c9d14af..78c65ac6 100644 --- a/components/Loading/index.html +++ b/components/Loading/index.html @@ -2,13 +2,29 @@ - Carbon Components Svelte + Loading - - -
+ + +

Loading

Source code
Table of Contents

Usage

Default (with overlay)

Open in new tab 
<script>
+  import { Loading } from "carbon-components-svelte";
+</script>
+
+<Loading />
+

No overlay

Active loading indicator
<script>
+  import { Loading } from "carbon-components-svelte";
+</script>
+
+<Loading withOverlay={false} />
+

Small size

Active loading indicator
<script>
+  import { Loading } from "carbon-components-svelte";
+</script>
+
+<Loading withOverlay={false} small />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Modal/index.html b/components/Modal/index.html index 1c9d14af..8aa287f6 100644 --- a/components/Modal/index.html +++ b/components/Modal/index.html @@ -2,13 +2,137 @@ - Carbon Components Svelte + Modal - - -
+ + +

Modal

Source code
Table of Contents

Usage

Default (transactional)

Open in new tab 
<script>
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button on:click={() => (open = true)}>Create database</Button>
+
+<Modal
+  bind:open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary={() => (open = false)}
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>
+

Danger modal

Open in new tab 
<script>
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button kind="danger" on:click={() => (open = true)}>Delete all</Button>
+
+<Modal
+  danger
+  bind:open
+  modalHeading="Delete all instances"
+  primaryButtonText="Delete"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary={() => (open = false)}
+  on:open
+  on:close
+  on:submit
+>
+  <p>This is a permanent action and cannot be undone.</p>
+</Modal>
+

Passive modal

Open in new tab 
<script>
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button kind="tertiary" on:click={() => (open = true)}>Learn more</Button>
+
+<Modal passiveModal bind:open modalHeading="IBM Cloudant" on:open on:close>
+  <p>
+    IBM Cloudant is a distributed, secure database with global availability and
+    zero vendor lock-in used to build web and mobile apps at scale.
+  </p>
+</Modal>
+

Extra-small size

Open in new tab 
<script>
+  import { Modal } from "carbon-components-svelte";
+</script>
+
+<Modal
+  size="xs"
+  open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>
+

Small size

Open in new tab 
<script>
+  import { Modal } from "carbon-components-svelte";
+</script>
+
+<Modal
+  size="sm"
+  open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>
+

Large size

Open in new tab 
<script>
+  import { Modal } from "carbon-components-svelte";
+</script>
+
+<Modal
+  size="lg"
+  open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>
+

Prevent close on outside click

preventCloseOnClickOutside prevents the modal from being closed when clicking outside of an open modal. This prop is intended to be used for transactional modals.

Open in new tab 
<script>
+  import { Modal } from "carbon-components-svelte";
+</script>
+
+<Modal
+  preventCloseOnClickOutside
+  open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/MultiSelect/index.html b/components/MultiSelect/index.html index 1c9d14af..0ec0ca36 100644 --- a/components/MultiSelect/index.html +++ b/components/MultiSelect/index.html @@ -2,13 +2,54 @@ - Carbon Components Svelte + MultiSelect - - -
+ + +

MultiSelect

Source code
Table of Contents

Usage

Default

<script>
+  import { MultiSelect } from "carbon-components-svelte";
+</script>
+
+<MultiSelect
+  titleText="Contact"
+  label="Select contact methods..."
+  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
+  selectedIds={['0', '1']}
+/>
+

Light variant

<script>
+  import { MultiSelect } from "carbon-components-svelte";
+</script>
+
+<MultiSelect
+  light
+  titleText="Contact"
+  label="Select contact methods..."
+  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
+/>
+

Inline type

<script>
+  import { MultiSelect } from "carbon-components-svelte";
+</script>
+
+<MultiSelect
+  type="inline"
+  titleText="Contact"
+  label="Select contact methods..."
+  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
+/>
+

Filterable

<script>
+  import { MultiSelect } from "carbon-components-svelte";
+</script>
+
+<MultiSelect
+  filterable
+  titleText="Contact"
+  placeholder="Filter contact methods..."
+  items={[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}
+/>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/NumberInput/index.html b/components/NumberInput/index.html index 1c9d14af..c9dfe7b5 100644 --- a/components/NumberInput/index.html +++ b/components/NumberInput/index.html @@ -2,13 +2,84 @@ - Carbon Components Svelte + NumberInput - - -
+ + +

NumberInput

Source code
Table of Contents

Usage

Default

<script>
+  import { NumberInput } from "carbon-components-svelte";
+</script>
+
+<NumberInput label="Clusters" />
+

With helper text

Clusters provisioned in your region
<script>
+  import { NumberInput } from "carbon-components-svelte";
+</script>
+
+<NumberInput
+  label="Clusters"
+  helperText="Clusters provisioned in your region"
+/>
+

Minimum and maximum values

Clusters provisioned in your region
<script>
+  import { NumberInput } from "carbon-components-svelte";
+</script>
+
+<NumberInput
+  min={4}
+  max={20}
+  value={4}
+  invalidText="Number must be between 4 and 20."
+  helperText="Clusters provisioned in your region"
+  label="Clusters (4 min, 20 max)"
+/>
+

Hidden label

<script>
+  import { NumberInput } from "carbon-components-svelte";
+</script>
+
+<NumberInput hideLabel label="Clusters" />
+

Light variant

<script>
+  import { NumberInput } from "carbon-components-svelte";
+</script>
+
+<NumberInput light label="Clusters" />
+

Mobile variant

<script>
+  import { NumberInput } from "carbon-components-svelte";
+</script>
+
+<NumberInput mobile label="Clusters" />
+

Extra-large size

<script>
+  import { NumberInput } from "carbon-components-svelte";
+</script>
+
+<NumberInput size="xl" label="Clusters" />
+

Small size

<script>
+  import { NumberInput } from "carbon-components-svelte";
+</script>
+
+<NumberInput size="sm" label="Clusters" />
+

Invalid state

An error occurred
<script>
+  import { NumberInput } from "carbon-components-svelte";
+</script>
+
+<NumberInput invalid invalidText="An error occurred" label="Clusters" />
+

Disabled state

<script>
+  import { NumberInput } from "carbon-components-svelte";
+</script>
+
+<NumberInput disabled label="Clusters" />
+

Skeleton

<script>
+  import { NumberInputSkeleton } from "carbon-components-svelte";
+</script>
+
+<NumberInputSkeleton />
+

Skeleton without label

<script>
+  import { NumberInputSkeleton } from "carbon-components-svelte";
+</script>
+
+<NumberInputSkeleton hideLabel />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/OrderedList/index.html b/components/OrderedList/index.html index 1c9d14af..6df660e2 100644 --- a/components/OrderedList/index.html +++ b/components/OrderedList/index.html @@ -2,13 +2,61 @@ - Carbon Components Svelte + OrderedList - - -
+ + +

OrderedList

Source code
Table of Contents

Usage

Default

  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
<script>
+  import { OrderedList, ListItem } from "carbon-components-svelte";
+</script>
+
+<OrderedList>
+  <ListItem>Ordered list item</ListItem>
+  <ListItem>Ordered list item</ListItem>
+  <ListItem>Ordered list item</ListItem>
+</OrderedList>
+
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
<script>
+  import { OrderedList, ListItem, Link } from "carbon-components-svelte";
+</script>
+
+<OrderedList>
+  <ListItem>
+    <Link href="#">Ordered list item</Link>
+  </ListItem>
+  <ListItem>
+    <Link href="#">Ordered list item</Link>
+  </ListItem>
+  <ListItem>
+    <Link href="#">Ordered list item</Link>
+  </ListItem>
+</OrderedList>
+

Nested

  1. Ordered list level 1 +
    1. Ordered list level 2
    2. Ordered list level 3 +
      1. Ordered list level 3
      2. Ordered list level 3
  2. Ordered list level 1
  3. Ordered list level 1
<script>
+  import { OrderedList, ListItem } from "carbon-components-svelte";
+</script>
+
+<OrderedList>
+  <ListItem>
+    Ordered list level 1
+    <OrderedList nested>
+      <ListItem>Ordered list level 2</ListItem>
+      <ListItem>
+        Ordered list level 3
+        <OrderedList nested>
+          <ListItem>Ordered list level 3</ListItem>
+          <ListItem>Ordered list level 3</ListItem>
+        </OrderedList>
+      </ListItem>
+    </OrderedList>
+  </ListItem>
+  <ListItem>Ordered list level 1</ListItem>
+  <ListItem>Ordered list level 1</ListItem>
+</OrderedList>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/OverflowMenu/index.html b/components/OverflowMenu/index.html index 1c9d14af..9f509ee1 100644 --- a/components/OverflowMenu/index.html +++ b/components/OverflowMenu/index.html @@ -2,13 +2,85 @@ - Carbon Components Svelte + OverflowMenu - - -
+ + +

OverflowMenu

Source code
Table of Contents

Usage

Default

<script>
+  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
+</script>
+
+<OverflowMenu>
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+  />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+

Flipped

<script>
+  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
+</script>
+
+<OverflowMenu open flipped>
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+  />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+
<script>
+  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
+</script>
+
+<OverflowMenu flipped direction="top">
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+  />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+

Custom primary focus

By default, the first overflow menu item is focused when opening the dropdown.

<script>
+  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
+</script>
+
+<OverflowMenu>
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+  />
+  <OverflowMenuItem primaryFocus danger text="Delete service" />
+</OverflowMenu>
+

Custom trigger slot

<script>
+  import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
+</script>
+
+<OverflowMenu style="width: auto;">
+  <div slot="menu" style="padding: 1rem; color: red;">Custom trigger</div>
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+  />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Pagination/index.html b/components/Pagination/index.html index 1c9d14af..540e14fd 100644 --- a/components/Pagination/index.html +++ b/components/Pagination/index.html @@ -2,13 +2,39 @@ - Carbon Components Svelte + Pagination - - -
+ + +

Pagination

Source code
Table of Contents

Usage

Default

1–10 of 102 items
of 11 pages 
<script>
+  import { Pagination } from "carbon-components-svelte";
+</script>
+
+<Pagination totalItems={102} pageSizes={[10, 15, 20]} />
+

Current page

31–40 of 102 items
of 11 pages 
<script>
+  import { Pagination } from "carbon-components-svelte";
+</script>
+
+<Pagination totalItems={102} page={4} />
+

Custom page sizes

1–36 of 102 items
of 3 pages 
<script>
+  import { Pagination } from "carbon-components-svelte";
+</script>
+
+<Pagination totalItems={102} pageSizes={[16, 36, 99]} pageSize={36} />
+

Hidden page input

1–10 of 102 items
<script>
+  import { Pagination } from "carbon-components-svelte";
+</script>
+
+<Pagination totalItems={102} pageInputDisabled />
+

Skeleton

<script>
+  import { PaginationSkeleton } from "carbon-components-svelte";
+</script>
+
+<PaginationSkeleton />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/PaginationNav/index.html b/components/PaginationNav/index.html index 1c9d14af..b0599f17 100644 --- a/components/PaginationNav/index.html +++ b/components/PaginationNav/index.html @@ -2,13 +2,24 @@ - Carbon Components Svelte + PaginationNav - - -
+ + +

PaginationNav

Source code
Table of Contents

Usage

Default

<script>
+  import { PaginationNav } from "carbon-components-svelte";
+</script>
+
+<PaginationNav />
+

Loopable

<script>
+  import { PaginationNav } from "carbon-components-svelte";
+</script>
+
+<PaginationNav total={3} loop />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/PasswordInput/index.html b/components/PasswordInput/index.html index 1c9d14af..d25238a2 100644 --- a/components/PasswordInput/index.html +++ b/components/PasswordInput/index.html @@ -2,13 +2,64 @@ - Carbon Components Svelte + PasswordInput - - -
+ + +

PasswordInput

Source code
Table of Contents

Usage

Default

<script>
+  import { PasswordInput } from "carbon-components-svelte";
+</script>
+
+<PasswordInput labelText="Password" placeholder="Enter password..." />
+

Password is visible

Set prop type to "text" to toggle password visibility.

<script>
+  import { PasswordInput } from "carbon-components-svelte";
+</script>
+
+<PasswordInput
+  labelText="Password"
+  type="text"
+  placeholder="Enter password..."
+  value="as_lta0890sdfpo__!9901"
+/>
+

Hidden label

<script>
+  import { PasswordInput } from "carbon-components-svelte";
+</script>
+
+<PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />
+

Light variant

<script>
+  import { PasswordInput } from "carbon-components-svelte";
+</script>
+
+<PasswordInput light labelText="Password" placeholder="Enter password..." />
+

Extra-large size

<script>
+  import { PasswordInput } from "carbon-components-svelte";
+</script>
+
+<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
+

Small size

<script>
+  import { PasswordInput } from "carbon-components-svelte";
+</script>
+
+<PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />
+

Invalid state

Incorrect user name or password.
<script>
+  import { PasswordInput } from "carbon-components-svelte";
+</script>
+
+<PasswordInput
+  invalid
+  invalidText="Incorrect user name or password."
+  labelText="Password"
+  placeholder="Enter password..."
+/>
+

Disabled state

<script>
+  import { PasswordInput } from "carbon-components-svelte";
+</script>
+
+<PasswordInput disabled labelText="Password" placeholder="Enter password..." />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/ProgressIndicator/index.html b/components/ProgressIndicator/index.html index 1c9d14af..72969a0d 100644 --- a/components/ProgressIndicator/index.html +++ b/components/ProgressIndicator/index.html @@ -2,13 +2,79 @@ - Carbon Components Svelte + ProgressIndicator - - -
+ + +

ProgressIndicator

Source code
Table of Contents

Usage

Default (horizontal)

<script>
+  import { ProgressIndicator, ProgressStep } from "carbon-components-svelte";
+</script>
+
+<ProgressIndicator>
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+</ProgressIndicator>
+

Spaced-equally

<script>
+  import { ProgressIndicator, ProgressStep } from "carbon-components-svelte";
+</script>
+
+<ProgressIndicator spaceEqually>
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+</ProgressIndicator>
+

Vertical

<script>
+  import { ProgressIndicator, ProgressStep } from "carbon-components-svelte";
+</script>
+
+<ProgressIndicator vertical>
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+</ProgressIndicator>
+

Skeleton

<script>
+  import { ProgressIndicatorSkeleton } from "carbon-components-svelte";
+</script>
+
+<ProgressIndicatorSkeleton />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/RadioButton/index.html b/components/RadioButton/index.html index 1c9d14af..9192d01a 100644 --- a/components/RadioButton/index.html +++ b/components/RadioButton/index.html @@ -2,13 +2,89 @@ - Carbon Components Svelte + RadioButton - - -
+ + +

RadioButton

Source code
Table of Contents

Usage

Default

Storage tier (disk) 
<script>
+  import {
+    FormGroup,
+    RadioButtonGroup,
+    RadioButton,
+  } from "carbon-components-svelte";
+</script>
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup selected="standard">
+    <RadioButton labelText="Free (1 GB)" value="free" />
+    <RadioButton labelText="Standard (10 GB)" value="standard" />
+    <RadioButton labelText="Pro (128 GB)" value="pro" />
+  </RadioButtonGroup>
+</FormGroup>
+

Label text aligned left

Storage tier (disk) 
<script>
+  import {
+    FormGroup,
+    RadioButtonGroup,
+    RadioButton,
+  } from "carbon-components-svelte";
+</script>
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup labelPosition="left" selected="standard">
+    <RadioButton labelText="Free (1 GB)" value="free" />
+    <RadioButton labelText="Standard (10 GB)" value="standard" />
+    <RadioButton labelText="Pro (128 GB)" value="pro" />
+  </RadioButtonGroup>
+</FormGroup>
+

Vertical orientation

Storage tier (disk) 
<script>
+  import {
+    FormGroup,
+    RadioButtonGroup,
+    RadioButton,
+  } from "carbon-components-svelte";
+</script>
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup orientation="vertical" selected="standard">
+    <RadioButton labelText="Free (1 GB)" value="free" />
+    <RadioButton labelText="Standard (10 GB)" value="standard" />
+    <RadioButton labelText="Pro (128 GB)" value="pro" />
+  </RadioButtonGroup>
+</FormGroup>
+

Skeleton

Storage tier (disk) 
<script>
+  import {
+    FormGroup,
+    RadioButtonGroup,
+    RadioButtonSkeleton,
+  } from "carbon-components-svelte";
+</script>
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup>
+    <RadioButtonSkeleton />
+    <RadioButtonSkeleton />
+    <RadioButtonSkeleton />
+  </RadioButtonGroup>
+</FormGroup>
+

Skeleton (vertical orientation)

Storage tier (disk) 
<script>
+  import {
+    FormGroup,
+    RadioButtonGroup,
+    RadioButtonSkeleton,
+  } from "carbon-components-svelte";
+</script>
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup orientation="vertical">
+    <RadioButtonSkeleton />
+    <RadioButtonSkeleton />
+    <RadioButtonSkeleton />
+  </RadioButtonGroup>
+</FormGroup>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/RadioTile/index.html b/components/RadioTile/index.html index 1c9d14af..bf625c31 100644 --- a/components/RadioTile/index.html +++ b/components/RadioTile/index.html @@ -2,13 +2,32 @@ - Carbon Components Svelte + RadioTile - - -
+ + +

RadioTile

Source code
Table of Contents

Usage

Default

Service pricing tiers 
<script>
+  import { TileGroup, RadioTile } from "carbon-components-svelte";
+</script>
+
+<TileGroup legend="Service pricing tiers">
+  <RadioTile value="0" checked>Lite plan</RadioTile>
+  <RadioTile value="1">Standard plan</RadioTile>
+  <RadioTile value="2">Plus plan</RadioTile>
+</TileGroup>
+

Light variant

Service pricing tiers 
<script>
+  import { TileGroup, RadioTile } from "carbon-components-svelte";
+</script>
+
+<TileGroup legend="Service pricing tiers">
+  <RadioTile value="0" checked>Lite plan</RadioTile>
+  <RadioTile value="1">Standard plan</RadioTile>
+  <RadioTile value="2">Plus plan</RadioTile>
+</TileGroup>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Search/index.html b/components/Search/index.html index 1c9d14af..be59da7d 100644 --- a/components/Search/index.html +++ b/components/Search/index.html @@ -2,13 +2,44 @@ - Carbon Components Svelte + Search - - -
+ + +

Search

Source code
Table of Contents

Usage

Default

<script>
+  import { Search } from "carbon-components-svelte";
+</script>
+
+<Search />
+

Default value

<script>
+  import { Search } from "carbon-components-svelte";
+</script>
+
+<Search placeholder="Search catalog..." value="Cloud functions" />
+

Light variant

<script>
+  import { Search } from "carbon-components-svelte";
+</script>
+
+<Search light />
+

Large size

<script>
+  import { Search } from "carbon-components-svelte";
+</script>
+
+<Search size="lg" />
+

Small size

<script>
+  import { Search } from "carbon-components-svelte";
+</script>
+
+<Search size="sm" />
+

Skeleton

<script>
+  import { Search } from "carbon-components-svelte";
+</script>
+
+<Search skeleton />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Select/index.html b/components/Select/index.html index 1c9d14af..abf3be63 100644 --- a/components/Select/index.html +++ b/components/Select/index.html @@ -2,13 +2,78 @@ - Carbon Components Svelte + Select - - -
+ + +

Select

Source code
Table of Contents

Usage

Default

<script>
+  import { Select, SelectItem } from "carbon-components-svelte";
+</script>
+
+<Select labelText="Carbon theme" selected="g10">
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+

Item groups

<script>
+  import {
+    Select,
+    SelectItem,
+    SelectItemGroup,
+  } from "carbon-components-svelte";
+</script>
+
+<Select labelText="Carbon theme" selected="g10">
+  <SelectItem value="0" text="Select a theme" disabled hidden />
+  <SelectItemGroup label="Light theme">
+    <SelectItem value="white" text="White" />
+    <SelectItem value="g10" text="Gray 10" />
+  </SelectItemGroup>
+  <SelectItemGroup label="Dark theme">
+    <SelectItem value="g90" text="Gray 90" />
+    <SelectItem value="g100" text="Gray 100" />
+  </SelectItemGroup>
+</Select>
+

Light variant

<script>
+  import { Select, SelectItem } from "carbon-components-svelte";
+</script>
+
+<Select light labelText="Carbon theme" selected="g10">
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+

Inline type

<script>
+  import { Select, SelectItem } from "carbon-components-svelte";
+</script>
+
+<Select inline labelText="Carbon theme" selected="g10">
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+

Disabled

<script>
+  import { Select, SelectItem } from "carbon-components-svelte";
+</script>
+
+<Select disabled labelText="Carbon theme" selected="g10">
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+

Skeleton

<script>
+  import { SelectSkeleton } from "carbon-components-svelte";
+</script>
+
+<SelectSkeleton />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/SelectableTile/index.html b/components/SelectableTile/index.html index 1c9d14af..b388bce4 100644 --- a/components/SelectableTile/index.html +++ b/components/SelectableTile/index.html @@ -2,13 +2,32 @@ - Carbon Components Svelte + SelectableTile - - -
+ + +

SelectableTile

Source code
Table of Contents

Usage

Multi-selectable tiles

<script>
+  import { SelectableTile } from "carbon-components-svelte";
+</script>
+
+<div role="group" aria-label="selectable tiles">
+  <SelectableTile selected>Multi-select Tile</SelectableTile>
+  <SelectableTile selected>Multi-select Tile</SelectableTile>
+  <SelectableTile>Multi-select Tile</SelectableTile>
+</div>
+

Light variant

<script>
+  import { SelectableTile } from "carbon-components-svelte";
+</script>
+
+<div role="group" aria-label="selectable tiles">
+  <SelectableTile light selected>Multi-select Tile</SelectableTile>
+  <SelectableTile light selected>Multi-select Tile</SelectableTile>
+  <SelectableTile light>Multi-select Tile</SelectableTile>
+</div>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/SkeletonPlaceholder/index.html b/components/SkeletonPlaceholder/index.html index 1c9d14af..5e86aff3 100644 --- a/components/SkeletonPlaceholder/index.html +++ b/components/SkeletonPlaceholder/index.html @@ -2,13 +2,24 @@ - Carbon Components Svelte + SkeletonPlaceholder - - -
+ + + - + \ No newline at end of file diff --git a/components/SkeletonText/index.html b/components/SkeletonText/index.html index 1c9d14af..abf0918b 100644 --- a/components/SkeletonText/index.html +++ b/components/SkeletonText/index.html @@ -2,13 +2,39 @@ - Carbon Components Svelte + SkeletonText - - -
+ + +

SkeletonText

Source code
Table of Contents

Usage

Default

<script>
+  import { SkeletonText } from "carbon-components-svelte";
+</script>
+
+<SkeletonText />
+

Heading variant

<script>
+  import { SkeletonText } from "carbon-components-svelte";
+</script>
+
+<SkeletonText heading />
+

Heading variant

<script>
+  import { SkeletonText } from "carbon-components-svelte";
+</script>
+
+<SkeletonText heading />
+

Paragraph variant

<script>
+  import { SkeletonText } from "carbon-components-svelte";
+</script>
+
+<SkeletonText paragraph />
+

Paragraph with max width

<script>
+  import { SkeletonText } from "carbon-components-svelte";
+</script>
+
+<SkeletonText paragraph width="50%" />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Slider/index.html b/components/Slider/index.html index 1c9d14af..93013102 100644 --- a/components/Slider/index.html +++ b/components/Slider/index.html @@ -2,13 +2,65 @@ - Carbon Components Svelte + Slider - - -
+ + +

Slider

Source code
Table of Contents

Usage

Default

0 100 
<script>
+  import { Slider } from "carbon-components-svelte";
+</script>
+
+<Slider />
+

Custom minimum, maximum values

10 990 MB 
<script>
+  import { Slider } from "carbon-components-svelte";
+</script>
+
+<Slider
+  labelText="Runtime memory (MB)"
+  min={10}
+  max={990}
+  maxLabel="990 MB"
+  value={100}
+/>
+

Custom step value

10 990 MB 
<script>
+  import { Slider } from "carbon-components-svelte";
+</script>
+
+<Slider
+  labelText="Runtime memory (MB)"
+  min={10}
+  max={990}
+  maxLabel="990 MB"
+  value={100}
+  step={10}
+/>
+

Light variant

10 990 MB 
<script>
+  import { Slider } from "carbon-components-svelte";
+</script>
+
+<Slider
+  light
+  labelText="Runtime memory (MB)"
+  min={10}
+  max={990}
+  maxLabel="990 MB"
+  value={100}
+  step={10}
+/>
+

Skeleton

<script>
+  import { SliderSkeleton } from "carbon-components-svelte";
+</script>
+
+<SliderSkeleton />
+

Skeleton (hidden label)

<script>
+  import { SliderSkeleton } from "carbon-components-svelte";
+</script>
+
+<SliderSkeleton hideLabel />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/StructuredList/index.html b/components/StructuredList/index.html index 1c9d14af..0209745c 100644 --- a/components/StructuredList/index.html +++ b/components/StructuredList/index.html @@ -2,13 +2,137 @@ - Carbon Components Svelte + StructuredList - - -
+ + +

StructuredList

Source code
Table of Contents

Usage

Default (read-only)

Column A
Column B
Column C
Row 1
Row 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum.
Row 2
Row 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum.
Row 3
Row 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum.
<script>
+  import {
+    StructuredList,
+    StructuredListHead,
+    StructuredListRow,
+    StructuredListCell,
+    StructuredListBody,
+  } from "carbon-components-svelte";
+</script>
+
+<StructuredList>
+  <StructuredListHead>
+    <StructuredListRow head>
+      <StructuredListCell head>Column A</StructuredListCell>
+      <StructuredListCell head>Column B</StructuredListCell>
+      <StructuredListCell head>Column C</StructuredListCell>
+    </StructuredListRow>
+  </StructuredListHead>
+  <StructuredListBody>
+    <StructuredListRow>
+      <StructuredListCell noWrap>Row 1</StructuredListCell>
+      <StructuredListCell>Row 1</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
+        finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
+        euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
+        porttitor interdum.
+      </StructuredListCell>
+    </StructuredListRow>
+    <StructuredListRow>
+      <StructuredListCell noWrap>Row 2</StructuredListCell>
+      <StructuredListCell>Row 2</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
+        finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
+        euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
+        porttitor interdum.
+      </StructuredListCell>
+    </StructuredListRow>
+    <StructuredListRow>
+      <StructuredListCell noWrap>Row 3</StructuredListCell>
+      <StructuredListCell>Row 3</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
+        finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
+        euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
+        porttitor interdum.
+      </StructuredListCell>
+    </StructuredListRow>
+  </StructuredListBody>
+</StructuredList>
+

Selectable rows

ColumnA
ColumnB
ColumnC
<script>
+  import {
+    StructuredList,
+    StructuredListHead,
+    StructuredListRow,
+    StructuredListCell,
+    StructuredListBody,
+    StructuredListInput,
+  } from "carbon-components-svelte";
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
+</script>
+
+<StructuredList selection selected="row-1-value">
+  <StructuredListHead>
+    <StructuredListRow head>
+      <StructuredListCell head>ColumnA</StructuredListCell>
+      <StructuredListCell head>ColumnB</StructuredListCell>
+      <StructuredListCell head>ColumnC</StructuredListCell>
+      <StructuredListCell head>{''}</StructuredListCell>
+    </StructuredListRow>
+  </StructuredListHead>
+  <StructuredListBody>
+    {#each [1, 2, 3] as item}
+      <StructuredListRow label for="row-{item}">
+        <StructuredListCell>Row {item}</StructuredListCell>
+        <StructuredListCell>Row {item}</StructuredListCell>
+        <StructuredListCell>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+          magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+          sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+          vulputate nisl a porttitor interdum.
+        </StructuredListCell>
+        <StructuredListInput
+          id="row-{item}"
+          value="row-{item}-value"
+          title="row-{item}-title"
+          name="row-{item}-name"
+        />
+        <StructuredListCell>
+          <CheckmarkFilled16
+            class="bx--structured-list-svg"
+            aria-label="select an option"
+            title="select an option"
+          />
+        </StructuredListCell>
+      </StructuredListRow>
+    {/each}
+  </StructuredListBody>
+</StructuredList>
+

Skeleton

<script>
+  import { StructuredListSkeleton } from "carbon-components-svelte";
+</script>
+
+<StructuredListSkeleton rows={3} />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Tabs/index.html b/components/Tabs/index.html index 1c9d14af..da206b2c 100644 --- a/components/Tabs/index.html +++ b/components/Tabs/index.html @@ -2,13 +2,47 @@ - Carbon Components Svelte + Tabs - - -
+ + +

Tabs

Source code
Table of Contents

Usage

Default

Content 1
<script>
+  import { Tabs, Tab, TabContent } from "carbon-components-svelte";
+</script>
+
+<Tabs>
+  <Tab label="Tab label 1" />
+  <Tab label="Tab label 2" />
+  <Tab label="Tab label 3" />
+  <div slot="content">
+    <TabContent>Content 1</TabContent>
+    <TabContent>Content 2</TabContent>
+    <TabContent>Content 3</TabContent>
+  </div>
+</Tabs>
+

Container type

Content 1
<script>
+  import { Tabs, Tab, TabContent } from "carbon-components-svelte";
+</script>
+
+<Tabs type="container">
+  <Tab label="Tab label 1" />
+  <Tab label="Tab label 2" />
+  <Tab label="Tab label 3" />
+  <div slot="content">
+    <TabContent>Content 1</TabContent>
+    <TabContent>Content 2</TabContent>
+    <TabContent>Content 3</TabContent>
+  </div>
+</Tabs>
+

Skeleton

 
  •  
  •  
  •  
<script>
+  import { TabsSkeleton } from "carbon-components-svelte";
+</script>
+
+<TabsSkeleton count={3} />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Tag/index.html b/components/Tag/index.html index 1c9d14af..def86dc5 100644 --- a/components/Tag/index.html +++ b/components/Tag/index.html @@ -2,13 +2,44 @@ - Carbon Components Svelte + Tag - - -
+ + +

Tag

Source code
Table of Contents

Usage

Default

IBM Cloud
<script>
+  import { Tag } from "carbon-components-svelte";
+</script>
+
+<Tag>IBM Cloud</Tag>
+

Tag types

red magenta purple blue cyan teal green gray cool-gray warm-gray high-contrast
<script>
+  import { Tag } from "carbon-components-svelte";
+</script>
+
+<Tag type="red">red</Tag>
+<Tag type="magenta">magenta</Tag>
+<Tag type="purple">purple</Tag>
+<Tag type="blue">blue</Tag>
+<Tag type="cyan">cyan</Tag>
+<Tag type="teal">teal</Tag>
+<Tag type="green">green</Tag>
+<Tag type="gray">gray</Tag>
+<Tag type="cool-gray">cool-gray</Tag>
+<Tag type="warm-gray">warm-gray</Tag>
+<Tag type="high-contrast">high-contrast</Tag>
+

Filterable

Filterable 
<script>
+  import { Tag } from "carbon-components-svelte";
+</script>
+
+<Tag filter on:click>Filterable</Tag>
+

Skeleton

<script>
+  import { Tag } from "carbon-components-svelte";
+</script>
+
+<Tag skeleton />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/TextArea/index.html b/components/TextArea/index.html index 1c9d14af..78a614a1 100644 --- a/components/TextArea/index.html +++ b/components/TextArea/index.html @@ -2,13 +2,84 @@ - Carbon Components Svelte + TextArea - - -
+ + +

TextArea

Source code
Table of Contents

Usage

Default

<script>
+  import { TextArea } from "carbon-components-svelte";
+</script>
+
+<TextArea labelText="App description" placeholder="Enter a description..." />
+

With helper text

A rich description helps us better recommend related products and services
<script>
+  import { TextArea } from "carbon-components-svelte";
+</script>
+
+<TextArea
+  labelText="App description"
+  helperText="A rich description helps us better recommend related products and services"
+  placeholder="Enter a description..."
+/>
+

Hidden label

<script>
+  import { TextArea } from "carbon-components-svelte";
+</script>
+
+<TextArea
+  hideLabel
+  labelText="App description"
+  placeholder="Enter a description..."
+/>
+

Light variant

<script>
+  import { TextArea } from "carbon-components-svelte";
+</script>
+
+<TextArea
+  light
+  labelText="App description"
+  placeholder="Enter a description..."
+/>
+

Custom rows

<script>
+  import { TextArea } from "carbon-components-svelte";
+</script>
+
+<TextArea
+  rows={10}
+  labelText="App description"
+  placeholder="Enter a description..."
+/>
+

Invalid state

Only plain text characters are allowed
<script>
+  import { TextArea } from "carbon-components-svelte";
+</script>
+
+<TextArea
+  invalid
+  invalidText="Only plain text characters are allowed"
+  labelText="App description"
+  placeholder="Enter a description..."
+/>
+

Disabled state

<script>
+  import { TextArea } from "carbon-components-svelte";
+</script>
+
+<TextArea
+  disabled
+  labelText="App description"
+  placeholder="Enter a description..."
+/>
+

Skeleton

<script>
+  import { TextAreaSkeleton } from "carbon-components-svelte";
+</script>
+
+<TextAreaSkeleton />
+

Skeleton without label

<script>
+  import { TextAreaSkeleton } from "carbon-components-svelte";
+</script>
+
+<TextAreaSkeleton hideLabel />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/TextInput/index.html b/components/TextInput/index.html index 1c9d14af..45c0dcd0 100644 --- a/components/TextInput/index.html +++ b/components/TextInput/index.html @@ -2,13 +2,78 @@ - Carbon Components Svelte + TextInput - - -
+ + +

TextInput

Source code
Table of Contents

Usage

Default

<script>
+  import { TextInput } from "carbon-components-svelte";
+</script>
+
+<TextInput labelText="User name" placeholder="Enter user name..." />
+

With helper text

Your user name is associated with your email
<script>
+  import { TextInput } from "carbon-components-svelte";
+</script>
+
+<TextInput
+  labelText="User name"
+  helperText="Your user name is associated with your email"
+  placeholder="Enter user name..."
+/>
+

Hidden label

<script>
+  import { TextInput } from "carbon-components-svelte";
+</script>
+
+<TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
+

Light variant

<script>
+  import { TextInput } from "carbon-components-svelte";
+</script>
+
+<TextInput light labelText="User name" placeholder="Enter user name..." />
+

Inline

<script>
+  import { TextInput } from "carbon-components-svelte";
+</script>
+
+<TextInput inline labelText="User name" placeholder="Enter user name..." />
+

Extra-large size

<script>
+  import { TextInput } from "carbon-components-svelte";
+</script>
+
+<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
+

Small size

<script>
+  import { TextInput } from "carbon-components-svelte";
+</script>
+
+<TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
+

Invalid state

User name is already taken. Please try another.
<script>
+  import { TextInput } from "carbon-components-svelte";
+</script>
+
+<TextInput
+  invalid
+  invalidText="User name is already taken. Please try another."
+  labelText="User name"
+  placeholder="Enter user name..."
+/>
+

Disabled state

<script>
+  import { TextInput } from "carbon-components-svelte";
+</script>
+
+<TextInput disabled labelText="User name" placeholder="Enter user name..." />
+

Skeleton

<script>
+  import { TextInputSkeleton } from "carbon-components-svelte";
+</script>
+
+<TextInputSkeleton />
+

Skeleton without label

<script>
+  import { TextInputSkeleton } from "carbon-components-svelte";
+</script>
+
+<TextInputSkeleton hideLabel />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Tile/index.html b/components/Tile/index.html index 1c9d14af..4d728d77 100644 --- a/components/Tile/index.html +++ b/components/Tile/index.html @@ -2,13 +2,24 @@ - Carbon Components Svelte + Tile - - -
+ + + - + \ No newline at end of file diff --git a/components/TimePicker/index.html b/components/TimePicker/index.html index 1c9d14af..06b27456 100644 --- a/components/TimePicker/index.html +++ b/components/TimePicker/index.html @@ -2,13 +2,68 @@ - Carbon Components Svelte + TimePicker - - -
+ + +

TimePicker

Source code
Table of Contents

Usage

Default

Open list of options
Open list of options
<script>
+  import {
+    TimePicker,
+    TimePickerSelect,
+    SelectItem,
+  } from "carbon-components-svelte";
+</script>
+
+<TimePicker labelText="Cron job" placeholder="hh:mm">
+  <TimePickerSelect value="PM">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+

Light variant

Open list of options
Open list of options
<script>
+  import {
+    TimePicker,
+    TimePickerSelect,
+    SelectItem,
+  } from "carbon-components-svelte";
+</script>
+
+<TimePicker light labelText="Cron job" placeholder="hh:mm">
+  <TimePickerSelect value="PM">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+

Disabled

Open list of options
Open list of options
<script>
+  import {
+    TimePicker,
+    TimePickerSelect,
+    SelectItem,
+  } from "carbon-components-svelte";
+</script>
+
+<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
+  <TimePickerSelect value="PM" disabled>
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT" disabled>
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/ToastNotification/index.html b/components/ToastNotification/index.html index 1c9d14af..6f1fc4cd 100644 --- a/components/ToastNotification/index.html +++ b/components/ToastNotification/index.html @@ -2,13 +2,61 @@ - Carbon Components Svelte + ToastNotification - - -
+ + +

ToastNotification

Source code
Table of Contents

Usage

Default (error)

<script>
+  import { ToastNotification } from "carbon-components-svelte";
+</script>
+
+<ToastNotification />
+

Hidden close button

<script>
+  import { ToastNotification } from "carbon-components-svelte";
+</script>
+
+<ToastNotification
+  hideCloseButton
+  kind="warning"
+  title="Upcoming scheduled maintenance"
+/>
+

Notification variants

<script>
+  import { ToastNotification } from "carbon-components-svelte";
+</script>
+
+<ToastNotification kind="error" />
+<ToastNotification kind="info" />
+<ToastNotification kind="info-square" />
+<ToastNotification kind="success" />
+<ToastNotification kind="warning" />
+<ToastNotification kind="warning-alt" />
+

Low contrast

<script>
+  import { ToastNotification } from "carbon-components-svelte";
+</script>
+
+<ToastNotification lowContrast kind="error" />
+<ToastNotification lowContrast kind="info" />
+<ToastNotification lowContrast kind="info-square" />
+<ToastNotification lowContrast kind="success" />
+<ToastNotification lowContrast kind="warning" />
+<ToastNotification lowContrast kind="warning-alt" />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Toggle/index.html b/components/Toggle/index.html index 1c9d14af..36a00e08 100644 --- a/components/Toggle/index.html +++ b/components/Toggle/index.html @@ -2,13 +2,39 @@ - Carbon Components Svelte + Toggle - - -
+ + +

Toggle

Source code
Table of Contents

Usage

Default (untoggled)

<script>
+  import { Toggle } from "carbon-components-svelte";
+</script>
+
+<Toggle labelText="Push notifications" />
+

Toggled

<script>
+  import { Toggle } from "carbon-components-svelte";
+</script>
+
+<Toggle labelText="Push notifications" toggled />
+

Custom labels

<script>
+  import { Toggle } from "carbon-components-svelte";
+</script>
+
+<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
+

Disabled

<script>
+  import { Toggle } from "carbon-components-svelte";
+</script>
+
+<Toggle labelText="Push notifications" disabled />
+

Skeleton

<script>
+  import { ToggleSkeleton } from "carbon-components-svelte";
+</script>
+
+<ToggleSkeleton />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/ToggleSmall/index.html b/components/ToggleSmall/index.html index 1c9d14af..9df6f015 100644 --- a/components/ToggleSmall/index.html +++ b/components/ToggleSmall/index.html @@ -2,13 +2,39 @@ - Carbon Components Svelte + ToggleSmall - - -
+ + +

ToggleSmall

Source code
Table of Contents

Usage

Default (untoggled)

<script>
+  import { ToggleSmall } from "carbon-components-svelte";
+</script>
+
+<ToggleSmall labelText="Push notifications" />
+

Toggled

<script>
+  import { ToggleSmall } from "carbon-components-svelte";
+</script>
+
+<ToggleSmall labelText="Push notifications" toggled />
+

Custom labels

<script>
+  import { ToggleSmall } from "carbon-components-svelte";
+</script>
+
+<ToggleSmall labelText="Push notifications" labelA="No" labelB="Yes" />
+

Disabled

<script>
+  import { ToggleSmall } from "carbon-components-svelte";
+</script>
+
+<ToggleSmall labelText="Push notifications" disabled />
+

Skeleton

<script>
+  import { ToggleSmallSkeleton } from "carbon-components-svelte";
+</script>
+
+<ToggleSmallSkeleton />
+
Table of Contents
- + \ No newline at end of file diff --git a/components/Tooltip/index.html b/components/Tooltip/index.html index 1c9d14af..865f0923 100644 --- a/components/Tooltip/index.html +++ b/components/Tooltip/index.html @@ -2,13 +2,71 @@ - Carbon Components Svelte + Tooltip - - -
+ + +

Tooltip

Source code
Table of Contents

Usage

Default (icon-only, “bottom” direction)

<script>
+  import { Tooltip } from "carbon-components-svelte";
+</script>
+
+<Tooltip>
+  <p>Resources are provisioned based on your account's organization.</p>
+</Tooltip>
+

With trigger text

Resource list 
<script>
+  import { Tooltip } from "carbon-components-svelte";
+</script>
+
+<Tooltip triggerText="Resource list">
+  <p>Resources are provisioned based on your account's organization.</p>
+</Tooltip>
+

Directions

Top
Right
Bottom
Left 
<script>
+  import { Tooltip } from "carbon-components-svelte";
+</script>
+
+<Tooltip triggerText="Top" direction="top">
+  <p>Top</p>
+</Tooltip>
+<Tooltip triggerText="Right" direction="right">
+  <p>Right</p>
+</Tooltip>
+<Tooltip triggerText="Bottom" direction="bottom">
+  <p>Bottom</p>
+</Tooltip>
+<Tooltip triggerText="Left" direction="left">
+  <p>Left</p>
+</Tooltip>
+

Interactive

Resource list 
<script>
+  import { Tooltip, Link, Button } from "carbon-components-svelte";
+</script>
+
+<Tooltip triggerText="Resource list">
+  <p>Resources are provisioned based on your account's organization.</p>
+  <div class="bx--tooltip__footer">
+    <Link href="/">Learn more</Link>
+    <Button size="small">Manage</Button>
+  </div>
+</Tooltip>
+

Custom icon (component)

Resource list 
<script>
+  import { Tooltip } from "carbon-components-svelte";
+  import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
+</script>
+
+<Tooltip triggerText="Resource list" icon={Catalog16}>
+  <p>Resources are provisioned based on your account's organization.</p>
+</Tooltip>
+

Custom icon (slot)

Resource list 
<script>
+  import { Tooltip } from "carbon-components-svelte";
+</script>
+
+<Tooltip triggerText="Resource list">
+  <div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;" />
+  <p>Resources are provisioned based on your account's organization.</p>
+</Tooltip>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/TooltipDefinition/index.html b/components/TooltipDefinition/index.html index 1c9d14af..22934c73 100644 --- a/components/TooltipDefinition/index.html +++ b/components/TooltipDefinition/index.html @@ -2,13 +2,34 @@ - Carbon Components Svelte + TooltipDefinition - - -
+ + +

TooltipDefinition

Source code
Table of Contents

Usage

Default (“bottom” direction, “center” aligned)

<script>
+  import { TooltipDefinition } from "carbon-components-svelte";
+</script>
+
+<TooltipDefinition
+  tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
+>
+  Armonk
+</TooltipDefinition>
+

Custom direction, alignment

<script>
+  import { TooltipDefinition } from "carbon-components-svelte";
+</script>
+
+<TooltipDefinition
+  direction="top"
+  align="start"
+  tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
+>
+  Armonk
+</TooltipDefinition>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/TooltipIcon/index.html b/components/TooltipIcon/index.html index 1c9d14af..98fa15e4 100644 --- a/components/TooltipIcon/index.html +++ b/components/TooltipIcon/index.html @@ -2,13 +2,39 @@ - Carbon Components Svelte + TooltipIcon - - -
+ + +

TooltipIcon

Source code
Table of Contents

Usage

Default (“bottom” direction, “center” aligned)

<script>
+  import { TooltipIcon } from "carbon-components-svelte";
+  import Carbon24 from "carbon-icons-svelte/lib/Carbon24";
+</script>
+
+<TooltipIcon tooltipText="Carbon is an open source design system by IBM.">
+  <Carbon24 />
+</TooltipIcon>
+

Directions

<script>
+  import { TooltipIcon } from "carbon-components-svelte";
+  import Filter20 from "carbon-icons-svelte/lib/Filter20";
+</script>
+
+<TooltipIcon tooltipText="Top start" direction="top" align="start">
+  <Filter20 />
+</TooltipIcon>
+<TooltipIcon tooltipText="Right end" direction="right" align="end">
+  <Filter20 />
+</TooltipIcon>
+<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start">
+  <Filter20 />
+</TooltipIcon>
+<TooltipIcon tooltipText="Left start" direction="left" align="start">
+  <Filter20 />
+</TooltipIcon>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/UIShell/index.html b/components/UIShell/index.html index 1c9d14af..95dfc896 100644 --- a/components/UIShell/index.html +++ b/components/UIShell/index.html @@ -2,13 +2,211 @@ - Carbon Components Svelte + UIShell - - -
+ + +

UIShell

Source code
Table of Contents

Usage

Header with side navigation

Open in new tab 
<script>
+  import {
+    Header,
+    HeaderNav,
+    HeaderNavItem,
+    HeaderNavMenu,
+    SideNav,
+    SideNavItems,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavLink,
+    SkipToContent,
+    Content,
+    Grid,
+    Row,
+    Column,
+  } from "carbon-components-svelte";
+
+  let isSideNavOpen = false;
+</script>
+
+<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+
+  <HeaderNav>
+    <HeaderNavItem href="/" text="Link 1" />
+    <HeaderNavItem href="/" text="Link 2" />
+    <HeaderNavItem href="/" text="Link 3" />
+    <HeaderNavMenu text="Menu">
+      <HeaderNavItem href="/" text="Link 1" />
+      <HeaderNavItem href="/" text="Link 2" />
+      <HeaderNavItem href="/" text="Link 3" />
+    </HeaderNavMenu>
+  </HeaderNav>
+</Header>
+
+<SideNav bind:isOpen={isSideNavOpen}>
+  <SideNavItems>
+    <SideNavLink text="Link 1" />
+    <SideNavLink text="Link 2" />
+    <SideNavLink text="Link 3" />
+    <SideNavMenu text="Menu">
+      <SideNavMenuItem href="/" text="Link 1" />
+      <SideNavMenuItem href="/" text="Link 2" />
+      <SideNavMenuItem href="/" text="Link 3" />
+    </SideNavMenu>
+  </SideNavItems>
+</SideNav>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>Welcome</h1>
+      </Column>
+    </Row>
+  </Grid>
+</Content>
+

Header with app switcher

Open in new tab 
<script>
+  import {
+    Header,
+    HeaderUtilities,
+    HeaderAction,
+    HeaderPanelLinks,
+    HeaderPanelDivider,
+    HeaderPanelLink,
+    SideNav,
+    SideNavItems,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavLink,
+    SkipToContent,
+    Content,
+    Grid,
+    Row,
+    Column,
+  } from "carbon-components-svelte";
+
+  let isSideNavOpen = false;
+  let isOpen = false;
+</script>
+
+<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+  <HeaderUtilities>
+    <HeaderAction bind:isOpen>
+      <HeaderPanelLinks>
+        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+        <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 2</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 3</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 4</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 5</HeaderPanelLink>
+      </HeaderPanelLinks>
+    </HeaderAction>
+  </HeaderUtilities>
+</Header>
+
+<SideNav bind:isOpen={isSideNavOpen}>
+  <SideNavItems>
+    <SideNavLink text="Link 1" />
+    <SideNavLink text="Link 2" />
+    <SideNavLink text="Link 3" />
+    <SideNavMenu text="Menu">
+      <SideNavMenuItem href="/" text="Link 1" />
+      <SideNavMenuItem href="/" text="Link 2" />
+      <SideNavMenuItem href="/" text="Link 3" />
+    </SideNavMenu>
+  </SideNavItems>
+</SideNav>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>Welcome</h1>
+      </Column>
+    </Row>
+  </Grid>
+</Content>
+

Header with utilities

Open in new tab 
<script>
+  import {
+    Header,
+    HeaderUtilities,
+    HeaderAction,
+    HeaderActionSearch,
+    HeaderGlobalAction,
+    HeaderPanelLinks,
+    HeaderPanelDivider,
+    HeaderPanelLink,
+    SideNav,
+    SideNavItems,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavLink,
+    SkipToContent,
+    Content,
+    Grid,
+    Row,
+    Column,
+  } from "carbon-components-svelte";
+  import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
+
+  let isSideNavOpen = false;
+  let isOpen = false;
+</script>
+
+<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+  <HeaderUtilities>
+    <HeaderActionSearch />
+    <HeaderGlobalAction aria-label="Settings" icon={SettingsAdjust20} />
+    <HeaderAction bind:isOpen>
+      <HeaderPanelLinks>
+        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+        <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 2</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 3</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 4</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 5</HeaderPanelLink>
+      </HeaderPanelLinks>
+    </HeaderAction>
+  </HeaderUtilities>
+</Header>
+
+<SideNav bind:isOpen={isSideNavOpen}>
+  <SideNavItems>
+    <SideNavLink text="Link 1" />
+    <SideNavLink text="Link 2" />
+    <SideNavLink text="Link 3" />
+    <SideNavMenu text="Menu">
+      <SideNavMenuItem href="/" text="Link 1" />
+      <SideNavMenuItem href="/" text="Link 2" />
+      <SideNavMenuItem href="/" text="Link 3" />
+    </SideNavMenu>
+  </SideNavItems>
+</SideNav>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>Welcome</h1>
+      </Column>
+    </Row>
+  </Grid>
+</Content>
+
Table of Contents
- + \ No newline at end of file diff --git a/components/UnorderedList/index.html b/components/UnorderedList/index.html index 1c9d14af..1583e03a 100644 --- a/components/UnorderedList/index.html +++ b/components/UnorderedList/index.html @@ -2,13 +2,61 @@ - Carbon Components Svelte + UnorderedList - - -
+ + +

UnorderedList

Source code
Table of Contents

Usage

Default

  • Unordered list item
  • Unordered list item
  • Unordered list item
<script>
+  import { UnorderedList, ListItem } from "carbon-components-svelte";
+</script>
+
+<UnorderedList>
+  <ListItem>Unordered list item</ListItem>
+  <ListItem>Unordered list item</ListItem>
+  <ListItem>Unordered list item</ListItem>
+</UnorderedList>
+
<script>
+  import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
+</script>
+
+<UnorderedList>
+  <ListItem>
+    <Link href="#">Unordered list item</Link>
+  </ListItem>
+  <ListItem>
+    <Link href="#">Unordered list item</Link>
+  </ListItem>
+  <ListItem>
+    <Link href="#">Unordered list item</Link>
+  </ListItem>
+</UnorderedList>
+

Nested

  • Unordered list level 1 +
    • Unordered list level 2
    • Unordered list level 3 +
      • Unordered list level 3
      • Unordered list level 3
  • Unordered list level 1
  • Unordered list level 1
<script>
+  import { UnorderedList, ListItem } from "carbon-components-svelte";
+</script>
+
+<UnorderedList>
+  <ListItem>
+    Unordered list level 1
+    <UnorderedList nested>
+      <ListItem>Unordered list level 2</ListItem>
+      <ListItem>
+        Unordered list level 3
+        <UnorderedList nested>
+          <ListItem>Unordered list level 3</ListItem>
+          <ListItem>Unordered list level 3</ListItem>
+        </UnorderedList>
+      </ListItem>
+    </UnorderedList>
+  </ListItem>
+  <ListItem>Unordered list level 1</ListItem>
+  <ListItem>Unordered list level 1</ListItem>
+</UnorderedList>
+
Table of Contents
- + \ No newline at end of file diff --git a/framed/Grid/AspectRatioColumns/index.html b/framed/Grid/AspectRatioColumns/index.html index 1c9d14af..ecccb350 100644 --- a/framed/Grid/AspectRatioColumns/index.html +++ b/framed/Grid/AspectRatioColumns/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
2x1
2x1
- + \ No newline at end of file diff --git a/framed/Grid/CondensedGrid/index.html b/framed/Grid/CondensedGrid/index.html index 1c9d14af..9033c239 100644 --- a/framed/Grid/CondensedGrid/index.html +++ b/framed/Grid/CondensedGrid/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
Column
Column
Column
Column
- + \ No newline at end of file diff --git a/framed/Grid/FullWidthGrid/index.html b/framed/Grid/FullWidthGrid/index.html index 1c9d14af..088bef3f 100644 --- a/framed/Grid/FullWidthGrid/index.html +++ b/framed/Grid/FullWidthGrid/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
Column
Column
Column
Column
- + \ No newline at end of file diff --git a/framed/Grid/Grid/index.html b/framed/Grid/Grid/index.html index 1c9d14af..823fc2c5 100644 --- a/framed/Grid/Grid/index.html +++ b/framed/Grid/Grid/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
Column
Column
Column
Column
- + \ No newline at end of file diff --git a/framed/Grid/NarrowGrid/index.html b/framed/Grid/NarrowGrid/index.html index 1c9d14af..04333b9e 100644 --- a/framed/Grid/NarrowGrid/index.html +++ b/framed/Grid/NarrowGrid/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
Column
Column
Column
Column
- + \ No newline at end of file diff --git a/framed/Grid/OffsetColumns/index.html b/framed/Grid/OffsetColumns/index.html index 1c9d14af..19f4f66e 100644 --- a/framed/Grid/OffsetColumns/index.html +++ b/framed/Grid/OffsetColumns/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
Offset 3
Offset 2
Offset 1
Offset 0
- + \ No newline at end of file diff --git a/framed/Grid/ResponsiveGrid/index.html b/framed/Grid/ResponsiveGrid/index.html index 1c9d14af..73833e3a 100644 --- a/framed/Grid/ResponsiveGrid/index.html +++ b/framed/Grid/ResponsiveGrid/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
sm: 1, md: 4, lg: 8
sm: 1, md: 2, lg: 2
sm: 1, md: 1, lg: 1
sm: 1, md: 1, lg: 1
- + \ No newline at end of file diff --git a/framed/Loading/Loading/index.html b/framed/Loading/Loading/index.html index 1c9d14af..6756af09 100644 --- a/framed/Loading/Loading/index.html +++ b/framed/Loading/Loading/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
Active loading indicator
- + \ No newline at end of file diff --git a/framed/Modal/ComposedModal/index.html b/framed/Modal/ComposedModal/index.html index 1c9d14af..795daf24 100644 --- a/framed/Modal/ComposedModal/index.html +++ b/framed/Modal/ComposedModal/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
- + \ No newline at end of file diff --git a/framed/Modal/DangerModal/index.html b/framed/Modal/DangerModal/index.html index 1c9d14af..8e849ce2 100644 --- a/framed/Modal/DangerModal/index.html +++ b/framed/Modal/DangerModal/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
- + \ No newline at end of file diff --git a/framed/Modal/Modal/index.html b/framed/Modal/Modal/index.html index 1c9d14af..6d554216 100644 --- a/framed/Modal/Modal/index.html +++ b/framed/Modal/Modal/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
- + \ No newline at end of file diff --git a/framed/Modal/ModalExtraSmall/index.html b/framed/Modal/ModalExtraSmall/index.html index 1c9d14af..59e7456b 100644 --- a/framed/Modal/ModalExtraSmall/index.html +++ b/framed/Modal/ModalExtraSmall/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
- + \ No newline at end of file diff --git a/framed/Modal/ModalLarge/index.html b/framed/Modal/ModalLarge/index.html index 1c9d14af..fa57a810 100644 --- a/framed/Modal/ModalLarge/index.html +++ b/framed/Modal/ModalLarge/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
- + \ No newline at end of file diff --git a/framed/Modal/ModalPreventOutsideClick/index.html b/framed/Modal/ModalPreventOutsideClick/index.html index 1c9d14af..03d20e23 100644 --- a/framed/Modal/ModalPreventOutsideClick/index.html +++ b/framed/Modal/ModalPreventOutsideClick/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
- + \ No newline at end of file diff --git a/framed/Modal/ModalSmall/index.html b/framed/Modal/ModalSmall/index.html index 1c9d14af..f3081c04 100644 --- a/framed/Modal/ModalSmall/index.html +++ b/framed/Modal/ModalSmall/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + +
- + \ No newline at end of file diff --git a/framed/Modal/PassiveModal/index.html b/framed/Modal/PassiveModal/index.html index 1c9d14af..fd284aea 100644 --- a/framed/Modal/PassiveModal/index.html +++ b/framed/Modal/PassiveModal/index.html @@ -4,11 +4,12 @@ Carbon Components Svelte - - -
+ + +
- + \ No newline at end of file diff --git a/framed/UIShell/HeaderNav/index.html b/framed/UIShell/HeaderNav/index.html index 1c9d14af..ab429a85 100644 --- a/framed/UIShell/HeaderNav/index.html +++ b/framed/UIShell/HeaderNav/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + + - + \ No newline at end of file diff --git a/framed/UIShell/HeaderSwitcher/index.html b/framed/UIShell/HeaderSwitcher/index.html index 1c9d14af..f04bcc7f 100644 --- a/framed/UIShell/HeaderSwitcher/index.html +++ b/framed/UIShell/HeaderSwitcher/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + + - + \ No newline at end of file diff --git a/framed/UIShell/HeaderUtilities/index.html b/framed/UIShell/HeaderUtilities/index.html index 1c9d14af..bafc6b59 100644 --- a/framed/UIShell/HeaderUtilities/index.html +++ b/framed/UIShell/HeaderUtilities/index.html @@ -4,11 +4,11 @@ Carbon Components Svelte - - -
+ + + - + \ No newline at end of file diff --git a/index.html b/index.html index 1c9d14af..720f1f70 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,18 @@ Carbon Components Svelte - - -
+ + + - + \ No newline at end of file