superdesk-ui-framework 2.4.19 → 2.4.20

package/dist/react/Buttons.tsx

@@ -187,6 +187,30 @@ export default class ButtonsDoc extends React.Component {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
+
+                <h3 className="docs-page__h3">Loading</h3>
+                <p className="docs-page__paragraph"><code>isLoading={'{true}'}</code></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                    <div className="docs-page__content-row">
+                        <Button text="default" isLoading={true} onClick={()=> false} />
+                        <Button text="primary" type="primary" isLoading={true} onClick={()=> false} />
+                        <Button text="success" type="success" isLoading={true} onClick={()=> false} />
+                        <Button text="warning" type="warning" isLoading={true} onClick={()=> false} />
+                        <Button text="alert" type="alert" isLoading={true} onClick={()=> false} />
+                        <Button text="highlight" type="highlight" isLoading={true} onClick={()=> false} />
+                    </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <Button text="default" isLoading={true} onClick={()=> false} />
+                        <Button text="primary" type="primary" isLoading={true} onClick={()=> false} />
+                        <Button text="success" type="success" isLoading={true} onClick={()=> false} />
+                        <Button text="warning" type="warning" isLoading={true} onClick={()=> false} />
+                        <Button text="alert" type="alert" isLoading={true} onClick={()=> false} />
+                        <Button text="highlight" type="highlight" isLoading={true} onClick={()=> false} />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
                 <h3 className="docs-page__h3">Buttons with icon and text</h3>
                 <p className="docs-page__paragraph">Buttons can be combined with icons from the icon font. Just add any of the available classes from the Icon font as a value of the <code>icon</code> prop.</p>
                 <Markup.ReactMarkup>
@@ -443,6 +467,7 @@ export default class ButtonsDoc extends React.Component {
                     <Prop name='size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button.'/>
                     <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
                     <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
+                    <Prop name='isLoading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator and disables the button if set to true.'/>
                     <Prop name='onClick' isRequired={true} type='function' default='false' description='Callback fired when a button is pressed.'/>
                 </PropsList>
             </section>

package/dist/react/Inputs.tsx

@@ -9,6 +9,7 @@ interface IState {
     required: boolean;
     disabled: boolean;
     invalid: boolean;
+    val: string
 }
 
 export default class InputsDoc extends React.Component<{}, IState> {
@@ -18,7 +19,8 @@ export default class InputsDoc extends React.Component<{}, IState> {
             inlineLabel: false,
             required: true,
             disabled: false,
-            invalid: false
+            invalid: false,
+            val: 'This is some text'
         }
     }
     
@@ -45,7 +47,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                             <div className='form__row'>
                                 <Input label='Input label'
-                                    value='This is the value'
+                                    value={this.state.val}
                                     maxLength={30}
                                     error='This is error message'
                                     info='This is some hint message'
@@ -53,8 +55,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     required={this.state.required}
                                     disabled={this.state.disabled}
                                     invalid={this.state.invalid}
-                                    onChange={(value) => {}} />
+                                    onChange={(value) => {this.setState({val: value})}} />
                             </div>
+
                         </div>
 
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>

package/dist/react/Tabs.tsx

@@ -2,30 +2,45 @@ import * as React from 'react';
 
 import * as Markup from '../../js/react';
 
-import { Tab, TabList, Prop, PropsList } from '../../../app-typescript';
-import {Tabs, TabLabel, TabPanel, TabContent} from '../../../app-typescript';
+import { Tab, TabList, Prop, PropsList, TabNav, TabItem } from '../../../app-typescript';
+import {TabPanel, TabContent} from '../../../app-typescript';
+import { stringify } from 'querystring';
 
 interface IState {
-    indexValue: number;
+    selected: string;
+    customSelected: string;
+    alternativeWaySelected: string;
 }
 
 export default class TabsDoc extends React.Component<{}, IState> {
     constructor(props){
         super(props);
         this.state = {
-            indexValue: 0
+            selected: null,
+            customSelected: 'metadata',
+            alternativeWaySelected: null,
         }
         this.handleClick=this.handleClick.bind(this);
+        this.handleClick_customTab=this.handleClick_customTab.bind(this);
+        this.handleClick_alternativeWay=this.handleClick_alternativeWay.bind(this);
     }
     tabs: TabList;
 
-    componentDidMount() {
-        this.tabs.goTo('Content')
+    handleClick = (id: string) => {
+        this.setState({
+            selected: id,
+        })
+    }
+
+    handleClick_customTab = (id: string) => {
+        this.setState({
+            customSelected: id,
+        })
     }
 
-    handleClick = (number: number) => {
+    handleClick_alternativeWay = (id: string) => {
         this.setState({
-            indexValue: number,
+            alternativeWaySelected: id,
         })
     }
 
@@ -34,32 +49,78 @@ export default class TabsDoc extends React.Component<{}, IState> {
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Tabs</h2>
                 <Markup.ReactMarkupCodePreview>{`
-                    <TabList>
-                        <Tab label='Content'>Content here.</Tab>
-                        <Tab label='Metadata'>Metadata here.</Tab>
-                        <Tab label='Duplicates'>Duplicates here.</Tab>
+                    <TabList  ref={(tabs) => {
+                        this.tabs = tabs;
+                    }}
+                    tabs={[
+                        {label: 'Content', content: 'Content here.', id: 'content'},
+                        {label: 'Metadata', content: 'Metadata here', id: 'metadata'},
+                        {label: 'Duplicate', content: 'Duplicate here.', id: 'duplicate'}
+                    ]}
+                    >
                     </TabList>
                 `}
                 </Markup.ReactMarkupCodePreview>
                 <h3 className="docs-page__h3">Default tabs</h3>
-                <p className="docs-page__paragraph">To have a tab-like navigation add the <code>TabList</code> component and multiple <code>Tab</code> components inside of it.</p>
+                <p className="docs-page__paragraph">To have a tab-like navigation add the <code>TabList</code> component and multiple <code>Tab</code> components inside of it, or add the appropriate attributes on <code>TabList.</code></p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row'>
-                            <TabList ref={(tabs) => {
+                            <TabList  ref={(tabs) => {
                                 this.tabs = tabs;
-                            }}>
-                                <Tab label='Content'>Content here.</Tab>
-                                <Tab label='Metadata'>Metadata here.</Tab>
-                                <Tab label='Duplicates'>Duplicates here.</Tab>
+                            }}
+                            tabs={[
+                                {label: 'Content', content: 'Content here.', id: 'content'},
+                                {label: 'Metadata', content: 'Metadata here', id: 'metadata'},
+                                {label: 'Duplicate', content: 'Duplicate here.', id: 'duplicate'}
+                            ]}
+                            >
+                                {/* <Tab label='Content' id='content' >Content here.</Tab>
+                                <Tab label='Metadata' id='metadata' >Metadata here.</Tab>
+                                <Tab label='Duplicates' id='duplicate' >Duplicates here.</Tab> */}
+                            </TabList>
+                        </div>
+                        <p className="docs-page__paragraph">// Start width custom tab.</p>
+                        <div className='docs-page__content-row'>
+                            <TabList  ref={(tabs) => {
+                                this.tabs = tabs;
+                            }} 
+                            selected='metadata'
+                            tabs={[
+                                {label: 'Content', content: 'Content here.', id: 'content'},
+                                {label: 'Metadata', content: 'Metadata here', id: 'metadata'},
+                                {label: 'Duplicate', content: 'Duplicate here.', id: 'duplicate'}
+                            ]}
+                            >
+                                {/* <Tab label='Content' id='content' >Content here.</Tab>
+                                <Tab label='Metadata' id='metadata' >Metadata here.</Tab>
+                                <Tab label='Duplicates' id='duplicate' >Duplicates here.</Tab> */}
                             </TabList>
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <TabList>
-                            <Tab label='Content'>Content here.</Tab>
-                            <Tab label='Metadata'>Metadata here.</Tab>
-                            <Tab label='Duplicates'>Duplicates here.</Tab>
+                        <TabList  ref={(tabs) => {
+                            this.tabs = tabs;
+                        }}
+                        tabs={[
+                            {label: 'Content', content: 'Content here.', id: 'content'},
+                            {label: 'Metadata', content: 'Metadata here', id: 'metadata'},
+                            {label: 'Duplicate', content: 'Duplicate here.', id: 'duplicate'}
+                        ]}
+                        >
+                        </TabList>
+
+                        // start with custom tab (add atributte selected)
+                        <TabList  ref={(tabs) => {
+                            this.tabs = tabs;
+                        }}
+                        selected='metadata' //tabs.id
+                        tabs={[
+                            {label: 'Content', content: 'Content here.', id: 'content'},
+                            {label: 'Metadata', content: 'Metadata here', id: 'metadata'},
+                            {label: 'Duplicate', content: 'Duplicate here.', id: 'duplicate'}
+                        ]}
+                        >
                         </TabList>
                     `}
                     </Markup.ReactMarkupCode>
@@ -139,74 +200,166 @@ export default class TabsDoc extends React.Component<{}, IState> {
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <h3 className="docs-page__h3">Tabs with two components ( <code>Tabs</code> and <code> TabContent</code> ) </h3>
-                <p className="docs-page__paragraph">If you want to use on one place list of tabs and on another place content of tabs, wrap all <code>TabLabel</code> with <code>Tabs</code> component and all <code>TabPanel</code> components with <code>TabContent.</code></p>
+                <h3 className="docs-page__h3">Tabs with two components ( <code>TabNav</code> and <code> TabContent</code> ) </h3>
+                <p className="docs-page__paragraph">If you want to use on one place list of tabs and on another place content of tabs, wrap all <code>TabItem</code> with <code>TabNav</code> component and all <code>TabPanel</code> components with <code>TabContent</code>, or add the appropriate attributes on <code>TabNav</code> and <code>TabContent</code></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row'>
+                            <TabNav onClick={this.handleClick}  activePanel={this.state.selected}
+                                tabs={[
+                                        {label: 'Content', id: 'content'},
+                                        {label: 'Metadata', id: 'metadata'},
+                                        {label: 'Duplicate', id: 'duplicate'}   
+                                    ]}
+                                    >
+                            </TabNav>
+                            <TabContent activePanel={this.state.selected}
+                                tabs={[
+                                        {content: 'Content here.', id: 'content'},
+                                        {content: 'Metadata here.', id: 'metadata'},
+                                        {content: 'Duplicates here.', id: 'duplicate'}
+                                    ]}
+                                    >
+                            </TabContent>
+                        </div>
+                        <p className="docs-page__paragraph">// Start width custom tab.</p>
+                        <div className='docs-page__content-row'>
+                            <TabNav onClick={this.handleClick_customTab}  activePanel={this.state.customSelected}
+                                tabs={[
+                                        {label: 'Content', id: 'content'},
+                                        {label: 'Metadata', id: 'metadata'},
+                                        {label: 'Duplicate', id: 'duplicate'}
+                                    ]}
+                                    >
+                            </TabNav>
+                            <TabContent activePanel={this.state.customSelected}
+                                tabs={[
+                                        {content: 'Content here.', id: 'content'},
+                                        {content: 'Metadata here.', id: 'metadata'},
+                                        {content: 'Duplicates here.', id: 'duplicate'}
+                                    ]}
+                                    >
+                            </TabContent>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                    this.state = {
+                        selected: null,
+                    }
+                    handleClick = (id: string) => {
+                        this.setState({
+                            selected: id,
+                        })
+                    }
+
+                    <TabNav onClick={this.handleClick}  activePanel={this.state.selected}
+                        tabs={[
+                                {label: 'Content', id: 'content'},
+                                {label: 'Metadata', id: 'metadata'},
+                                {label: 'Duplicate', id: 'duplicate'}   
+                            ]}
+                            >
+                    </TabNav>
+                    <TabContent activePanel={this.state.selected}
+                        tabs={[
+                                {content: 'Content here.', id: 'content'},
+                                {content: 'Metadata here.', id: 'metadata'},
+                                {content: 'Duplicates here.', id: 'duplicate'}
+                            ]}
+                            >
+                    </TabContent>
+
+                    // start with custom tab
+                    this.state = {
+                        selected: 'metadata' //tabs.id,
+                    }
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <p className="docs-page__paragraph">Alternative way with children:</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row'>
-                            <Tabs onClick={this.handleClick}>
-                                <TabLabel label='Content' indexValue={0}/>
-                                <TabLabel label='Metadata' indexValue={1}/>
-                                <TabLabel label='Duplicates' indexValue={2}/>
-                            </Tabs>
-                            <TabContent activePanel={this.state.indexValue}>
-                                <TabPanel indexValue={0}>
-                                    Content here.
-                                </TabPanel>
-                                <TabPanel indexValue={1}>
-                                    Metadata here.
-                                </TabPanel>
-                                <TabPanel indexValue={2}>
-                                    Duplicates here.
-                                </TabPanel>
+                            <TabNav onClick={this.handleClick_alternativeWay}  activePanel={this.state.alternativeWaySelected}>
+                                <TabItem id='content'>Content</TabItem>
+                                <TabItem id='metadata'>Metadata</TabItem>
+                                <TabItem id='duplicate'>Duplicate</TabItem>
+                            </TabNav>
+                            <TabContent activePanel={this.state.alternativeWaySelected}>
+                                <TabPanel id='content'>Content here.</TabPanel>
+                                <TabPanel id='metadata'>Metadata here.</TabPanel>
+                                <TabPanel id='duplicate'>Duplicates here.</TabPanel>
                             </TabContent>
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                    const [activeIndex, setActiveIndex] = React.useState(0);
-                    const handleClick = (index: number) => {
-                        setActiveIndex(index);
+                    this.state = {
+                        selected: null,
+                    }
+                    handleClick = (id: string) => {
+                        this.setState({
+                            selected: id,
+                        })
                     }
 
-                       <Tabs onClick={handleClick}>
-                            <TabLabel label='Content' indexValue={0}/>
-                            <TabLabel label='Metadata' indexValue={1}/>
-                            <TabLabel label='Duplicates' indexValue={2}/>
-                        </Tabs>
-                        <TabContent activePanel={activeIndex}>
-                            <TabPanel indexValue={0}>
-                                Content here.
-                            </TabPanel>
-                            <TabPanel indexValue={1}>
-                                Metadata here.
-                            </TabPanel>
-                            <TabPanel indexValue={2}>
-                                Duplicates here.
-                            </TabPanel>
-                        </TabContent>
+                    <TabNav onClick={this.handleClick}  activePanel={this.state.selected}>
+                        <TabItem id='content'>Content</TabItem>
+                        <TabItem id='metadata'>Metadata</TabItem>
+                        <TabItem id='duplicate'>Duplicate</TabItem>
+                    </TabNav>
+                    <TabContent activePanel={this.state.selected}>
+                        <TabPanel id='content'>Content here.</TabPanel>
+                        <TabPanel id='metadata'>Metadata here.</TabPanel>
+                        <TabPanel id='duplicate'>Duplicates here.</TabPanel>
+                    </TabContent>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Props</h3>
+                <br/>
+                <h4 className="docs-page__h4">TabList</h4>
                 <PropsList>
-                    <Prop name='tablist size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button.'/>
-                    <Prop name='tablist theme' isRequired={false} type='light | dark' default='light' description='Styles tablist for diffrent background.'/>
-                    <Prop name='tab label' isRequired={false} type='string' default='/' description='Text value of Tab label'/>
+                    <Prop name='TabList size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button.'/>
+                    <Prop name='TabList theme' isRequired={false} type='light | dark' default='light' description='Styles tablist for diffrent background'/>
+                    <Prop name='TabList selected' isRequired={false} type='string' default='/' description='Specify which tab should be pre-selected'/>
+                    <Prop name='TabList tabs' isRequired={false} type='Array<label: string, content: React.ReactNode, id: string>' default='/' description='Array of objects'/>
+                    <Prop name='Tab label' isRequired={false} type='string' default='/' description='Text value of label'/>
+                    <Prop name='Tab id' isRequired={false} type='string' default='/' description='Id value of Tab component'/>
+                    <Prop name='Tab children' isRequired={false} type='React.ReactNode' default='/' description='Children of component'/>
+                </PropsList>
+                <p className='docs-page__paragraph'>tabs: TabList</p>
+                <PropsList>
+                    <Prop name='label' isRequired={true} type='string' default='/' description='Text value of label'/>
+                    <Prop name='content' isRequired={true} type='React.ReactNode' default='/' description='React.ReactNode'/>
+                    <Prop name='id' isRequired={true} type='string' default='/' description='Id value'/>
                 </PropsList>
                 <br/>
-                <h4 className="docs-page__h4">Tabs Custom</h4>
+                <h4 className="docs-page__h4">TabNav and TabContent</h4>
+                <PropsList>
+                    <Prop name='TabNav size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button'/>
+                    <Prop name='TabNav theme' isRequired={false} type='light | dark' default='light' description='Styles tablist for diffrent background'/>
+                    <Prop name='TabNav ariaLabel' isRequired={false} type='string' default='/' description='Text value of aria-label'/>
+                    <Prop name='TabNav onClick' isRequired={true} type='function' default='/' description='Use to return value of clicked label'/>
+                    <Prop name='TabNav activePanel' isRequired={true} type='string' default='/' description='Specify which tab should be pre-selected'/>
+                    <Prop name='TabNav tabs' isRequired={false} type='Array<label: string, id: string>' default='/' description='Array of objects'/>
+                    <Prop name='TabItem id' isRequired={true} type='string' default='/' description='Id value of Tab Item'/>
+                    <Prop name='TabItem label' isRequired={true} type='string' default='/' description='Text value of Tab label'/>
+                    <Prop name='TabContent theme' isRequired={false} type='light | dark' default='light' description='Styles tablist for diffrent background'/>
+                    <Prop name='TabContent activePanel' isRequired={true} type='string' default='/' description='Specify which tab should be pre-selected'/>
+                    <Prop name='TabContent tabs' isRequired={false} type='Array<content: React.ReactNode, id: string>' default='/' description='Array of objects'/>
+                    <Prop name='TabPanel id' isRequired={true} type='string' default='/' description='Id value of Tab Panel'/>
+                </PropsList>
+                <p className='docs-page__paragraph'>tabs: TabNav</p>
+                <PropsList>
+                    <Prop name='label' isRequired={true} type='string' default='/' description='Text value of label'/>
+                    <Prop name='id' isRequired={true} type='string' default='/' description='Unique identifier to connect tab nav and tab content'/>
+                </PropsList>
+                <p className='docs-page__paragraph'>tabs: TabContent</p>
                 <PropsList>
-                    <Prop name='tabs size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button.'/>
-                    <Prop name='tabs theme' isRequired={false} type='light | dark' default='light' description='Styles tablist for diffrent background.'/>
-                    <Prop name='tabs ariaLabel' isRequired={false} type='string' default='/' description='Text value of aria-label'/>
-                    <Prop name='tabs onClick' isRequired={true} type='function' default='/' description='Use to return value of clicked label'/>
-                    <Prop name='tablabel indexValue' isRequired={true} type='number' default='/' description='Index value of label'/>
-                    <Prop name='tablabel label' isRequired={true} type='string' default='/' description='Text value of Tab label'/>
-
-                    <Prop name='tabcontent theme' isRequired={false} type='light | dark' default='light' description='Styles tablist for diffrent background.'/>
-                    <Prop name='tabcontent activePanel' isRequired={true} type='number' default='/' description='Index value of active Tab'/>
-                    <Prop name='tabpanel indexValue' isRequired={true} type='number' default='/' description='Index value of Tab Panel'/>
+                    <Prop name='content' isRequired={true} type='React.ReactNode' default='/' description='React.ReactNode'/>
+                    <Prop name='id' isRequired={true} type='string' default='/' description='Unique identifier to connect tab nav and tab content'/>
                 </PropsList>
             </section>
         )

package/dist/superdesk-ui.bundle.css

@@ -1,3 +1,38 @@
+.sd-spinner {
+  animation: rotate 2s linear infinite;
+  z-index: 1; }
+  .sd-spinner--mini {
+    width: 1.8rem;
+    height: 1.8rem; }
+  .sd-spinner--small {
+    width: 2.4rem;
+    height: 2.4rem; }
+  .sd-spinner--medium {
+    width: 3.2rem;
+    height: 3.2rem; }
+  .sd-spinner--large {
+    width: 4.8rem;
+    height: 4.8rem; }
+
+.sd-spinner__path {
+  stroke: var(--color-text-light);
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite; }
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg); } }
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0; }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -32; }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124; } }
 @charset "UTF-8";
 :root {
   --sd-slugline-color: #005b7f; }
@@ -7558,6 +7593,7 @@ time {
   text-align: center;
   text-decoration: none;
   cursor: pointer;
+  gap: 0.6rem;
   background-color: rgba(51, 51, 51, 0.25);
   color: #333; }
   .btn:hover, .btn:focus {
@@ -7906,7 +7942,7 @@ time {
         border-color: rgba(30, 176, 108, 0.4) transparent transparent transparent;
         background-color: rgba(30, 176, 108, 0.19); }
   .btn.btn--disabled, .btn[disabled] {
-    opacity: 0.25;
+    opacity: 0.6;
     cursor: not-allowed;
     box-shadow: none; }
     .btn.btn--disabled:hover, .btn.btn--disabled:focus, .btn[disabled]:hover, .btn[disabled]:focus {
@@ -7916,7 +7952,7 @@ time {
       border: 1px solid transparent;
       box-shadow: none; }
     .btn.btn--disabled.btn--default, .btn[disabled].btn--default {
-      opacity: 0.25;
+      opacity: 0.6;
       cursor: not-allowed;
       box-shadow: none; }
       .btn.btn--disabled.btn--default:hover, .btn.btn--disabled.btn--default:focus, .btn[disabled].btn--default:hover, .btn[disabled].btn--default:focus {
@@ -7926,7 +7962,7 @@ time {
         border: 1px solid transparent;
         box-shadow: none; }
     .btn.btn--disabled.btn--primary, .btn[disabled].btn--primary {
-      opacity: 0.25;
+      opacity: 0.6;
       cursor: not-allowed;
       box-shadow: none; }
       .btn.btn--disabled.btn--primary:hover, .btn.btn--disabled.btn--primary:focus, .btn[disabled].btn--primary:hover, .btn[disabled].btn--primary:focus {
@@ -7936,7 +7972,7 @@ time {
         border: 1px solid transparent;
         box-shadow: none; }
     .btn.btn--disabled.btn--success, .btn[disabled].btn--success {
-      opacity: 0.25;
+      opacity: 0.6;
       cursor: not-allowed;
       box-shadow: none; }
       .btn.btn--disabled.btn--success:hover, .btn.btn--disabled.btn--success:focus, .btn[disabled].btn--success:hover, .btn[disabled].btn--success:focus {
@@ -7946,7 +7982,7 @@ time {
         border: 1px solid transparent;
         box-shadow: none; }
     .btn.btn--disabled.btn--warning, .btn[disabled].btn--warning {
-      opacity: 0.25;
+      opacity: 0.6;
       cursor: not-allowed;
       box-shadow: none; }
       .btn.btn--disabled.btn--warning:hover, .btn.btn--disabled.btn--warning:focus, .btn[disabled].btn--warning:hover, .btn[disabled].btn--warning:focus {
@@ -7956,7 +7992,7 @@ time {
         border: 1px solid transparent;
         box-shadow: none; }
     .btn.btn--disabled.btn--alert, .btn[disabled].btn--alert {
-      opacity: 0.25;
+      opacity: 0.6;
       cursor: not-allowed;
       box-shadow: none; }
       .btn.btn--disabled.btn--alert:hover, .btn.btn--disabled.btn--alert:focus, .btn[disabled].btn--alert:hover, .btn[disabled].btn--alert:focus {
@@ -7966,7 +8002,7 @@ time {
         border: 1px solid transparent;
         box-shadow: none; }
     .btn.btn--disabled.btn--highlight, .btn[disabled].btn--highlight {
-      opacity: 0.25;
+      opacity: 0.6;
       cursor: not-allowed;
       box-shadow: none; }
       .btn.btn--disabled.btn--highlight:hover, .btn.btn--disabled.btn--highlight:focus, .btn[disabled].btn--highlight:hover, .btn[disabled].btn--highlight:focus {
@@ -7976,7 +8012,7 @@ time {
         border: 1px solid transparent;
         box-shadow: none; }
     .btn.btn--disabled.btn--sd-green, .btn[disabled].btn--sd-green {
-      opacity: 0.25;
+      opacity: 0.6;
       cursor: not-allowed;
       box-shadow: none; }
       .btn.btn--disabled.btn--sd-green:hover, .btn.btn--disabled.btn--sd-green:focus, .btn[disabled].btn--sd-green:hover, .btn[disabled].btn--sd-green:focus {
@@ -8697,6 +8733,10 @@ time {
           .btn.btn--ui-dark.btn--text-only.btn--disabled.btn--sd-green:hover, .btn.btn--ui-dark.btn--text-only.btn--disabled.btn--sd-green:focus, .btn.btn--ui-dark.btn--text-only.btn--disabled.btn--sd-green:active, .btn.btn--ui-dark.btn--text-only[disabled].btn--sd-green:hover, .btn.btn--ui-dark.btn--text-only[disabled].btn--sd-green:focus, .btn.btn--ui-dark.btn--text-only[disabled].btn--sd-green:active {
             box-shadow: none;
             border-color: transparent; }
+      .btn.btn--ui-dark.btn--text-only.btn--primary, .btn.btn--ui-dark.btn--text-only.btn--success, .btn.btn--ui-dark.btn--text-only.btn--warning, .btn.btn--ui-dark.btn--text-only.btn--alert, .btn.btn--ui-dark.btn--text-only.btn--highlight, .btn.btn--ui-dark.btn--text-only.btn--sd-green, .btn.btn--ui-dark.btn--text-only.btn--secondary {
+        color: var(--sd-btn-txt); }
+        .btn.btn--ui-dark.btn--text-only.btn--primary .sd-spinner__path, .btn.btn--ui-dark.btn--text-only.btn--success .sd-spinner__path, .btn.btn--ui-dark.btn--text-only.btn--warning .sd-spinner__path, .btn.btn--ui-dark.btn--text-only.btn--alert .sd-spinner__path, .btn.btn--ui-dark.btn--text-only.btn--highlight .sd-spinner__path, .btn.btn--ui-dark.btn--text-only.btn--sd-green .sd-spinner__path, .btn.btn--ui-dark.btn--text-only.btn--secondary .sd-spinner__path {
+          stroke: var(--sd-btn-txt); }
     .btn.btn--ui-dark.btn--hollow {
       border: 1px solid rgba(245, 245, 245, 0.28);
       color: rgba(245, 245, 245, 0.7);
@@ -8787,6 +8827,10 @@ time {
           box-shadow: 0 0 0 3px rgba(94, 169, 200, 0.3); }
         .btn.btn--ui-dark.btn--hollow.btn--sd-green:active {
           box-shadow: inset 0 1px 0 0 #1eb06c; }
+      .btn.btn--ui-dark.btn--hollow.btn--primary, .btn.btn--ui-dark.btn--hollow.btn--success, .btn.btn--ui-dark.btn--hollow.btn--warning, .btn.btn--ui-dark.btn--hollow.btn--alert, .btn.btn--ui-dark.btn--hollow.btn--highlight, .btn.btn--ui-dark.btn--hollow.btn--sd-green, .btn.btn--ui-dark.btn--hollow.btn--secondary {
+        color: var(--sd-btn-color); }
+        .btn.btn--ui-dark.btn--hollow.btn--primary .sd-spinner__path, .btn.btn--ui-dark.btn--hollow.btn--success .sd-spinner__path, .btn.btn--ui-dark.btn--hollow.btn--warning .sd-spinner__path, .btn.btn--ui-dark.btn--hollow.btn--alert .sd-spinner__path, .btn.btn--ui-dark.btn--hollow.btn--highlight .sd-spinner__path, .btn.btn--ui-dark.btn--hollow.btn--sd-green .sd-spinner__path, .btn.btn--ui-dark.btn--hollow.btn--secondary .sd-spinner__path {
+          stroke: var(--sd-btn-color); }
       .btn.btn--ui-dark.btn--hollow.btn--disabled, .btn.btn--ui-dark.btn--hollow[disabled] {
         border: 1px solid 0;
         color: #F5F5F5;
@@ -8948,6 +8992,12 @@ time {
         background-color: rgba(35, 35, 35, 0.2); }
       .btn.btn--icon-only-circle.btn--text-only.btn--ui-dark [class^="icon-"], .btn.btn--icon-only-circle.btn--text-only.btn--ui-dark [class*=" icon-"] {
         color: #fff; }
+  .btn--primary, .btn--success, .btn--warning, .btn--alert, .btn--highlight, .btn--sd-green, .btn--secondary {
+    color: #fff; }
+    .btn--primary [class^="icon-"], .btn--primary [class*=" icon-"], .btn--success [class^="icon-"], .btn--success [class*=" icon-"], .btn--warning [class^="icon-"], .btn--warning [class*=" icon-"], .btn--alert [class^="icon-"], .btn--alert [class*=" icon-"], .btn--highlight [class^="icon-"], .btn--highlight [class*=" icon-"], .btn--sd-green [class^="icon-"], .btn--sd-green [class*=" icon-"], .btn--secondary [class^="icon-"], .btn--secondary [class*=" icon-"] {
+      color: #fff; }
+    .btn--primary .sd-spinner__path, .btn--success .sd-spinner__path, .btn--warning .sd-spinner__path, .btn--alert .sd-spinner__path, .btn--highlight .sd-spinner__path, .btn--sd-green .sd-spinner__path, .btn--secondary .sd-spinner__path {
+      stroke: #fff; }
 
 .sd-create-btn {
   width: 4.8rem;
@@ -9040,7 +9090,7 @@ time {
       color: #5ea9c8;
       opacity: 1; }
   .icn-btn--disabled {
-    opacity: 0.25; }
+    opacity: 0.6; }
   .icn-btn--small {
     height: 1.25em;
     width: 1.25em; }
@@ -10057,6 +10107,13 @@ time {
   position: absolute;
   width: 1px; }
 
+.btn[data-loading="true"] {
+  pointer-events: none; }
+  .btn[data-loading="true"] .sd-spinner {
+    margin-inline-start: -0.3rem; }
+  .btn[data-loading="true"].btn--icon-only .sd-spinner {
+    margin-inline-start: 0; }
+
 .label {
   display: inline-block;
   padding: 0 0.8rem;
@@ -19096,10 +19153,14 @@ tags-input {
   top: 0;
   z-index: -1;
   pointer-events: none;
-  opacity: 0;
-  height: 1px !important;
-  width: 1px !important;
-  overflow: hidden; }
+  opacity: 0 !important;
+  height: 0;
+  width: 0;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 0.01px !important;
+  padding: 0 !important;
+  margin: 0 !important; }
 
 .sd-popover {
   background: #333;