@solid-design-system/components 1.14.3 → 1.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/es/accordion-group.js +1 -1
- package/dist/components/es/accordion.js +1 -1
- package/dist/components/es/badge.js +1 -1
- package/dist/components/es/brandshape.js +1 -1
- package/dist/components/es/button.js +1 -1
- package/dist/components/es/divider.js +1 -1
- package/dist/components/es/drawer.js +1 -1
- package/dist/components/es/dropdown.js +1 -1
- package/dist/components/es/icon.js +3 -3
- package/dist/components/es/include.js +1 -1
- package/dist/components/es/link.js +1 -1
- package/dist/components/es/navigation-item.js +6 -0
- package/dist/components/es/popup.js +1 -1
- package/dist/components/es/register-custom-element.js +1 -0
- package/dist/components/es/solid-components2.js +1 -1
- package/dist/components/es/solid-element.js +3 -8
- package/dist/components/es/spinner.js +1 -1
- package/dist/components/es/tag.js +1 -1
- package/dist/components/es/teaser.js +1 -1
- package/dist/components/umd/solid-components.js +17 -18
- package/dist/custom-elements.json +1 -1
- package/dist/package/components/accordion/accordion.js +2 -1
- package/dist/package/components/accordion-group/accordion-group.js +2 -1
- package/dist/package/components/badge/badge.js +2 -1
- package/dist/package/components/brandshape/brandshape.js +2 -1
- package/dist/package/components/button/button.js +2 -1
- package/dist/package/components/divider/divider.js +2 -1
- package/dist/package/components/drawer/drawer.js +2 -1
- package/dist/package/components/dropdown/dropdown.js +2 -1
- package/dist/package/components/icon/icon.js +2 -1
- package/dist/package/components/include/include.js +2 -1
- package/dist/package/components/link/link.js +2 -1
- package/dist/package/components/navigation-item/navigation-item.d.ts +31 -0
- package/dist/package/components/navigation-item/navigation-item.js +166 -0
- package/dist/package/components/popup/popup.js +2 -1
- package/dist/package/components/spinner/spinner.js +2 -1
- package/dist/package/components/tag/tag.js +2 -1
- package/dist/package/components/teaser/teaser.js +2 -1
- package/dist/package/internal/register-custom-element.d.ts +19 -0
- package/dist/package/internal/register-custom-element.js +30 -0
- package/dist/package/solid-components.d.ts +1 -0
- package/dist/package/solid-components.js +10 -8
- package/dist/package/styles/tailwind.css.js +1 -1
- package/dist/versioned-components/es/accordion-group.js +1 -1
- package/dist/versioned-components/es/accordion.js +1 -1
- package/dist/versioned-components/es/badge.js +1 -1
- package/dist/versioned-components/es/brandshape.js +1 -1
- package/dist/versioned-components/es/button.js +1 -1
- package/dist/versioned-components/es/divider.js +1 -1
- package/dist/versioned-components/es/drawer.js +1 -1
- package/dist/versioned-components/es/dropdown.js +1 -1
- package/dist/versioned-components/es/icon.js +3 -3
- package/dist/versioned-components/es/include.js +1 -1
- package/dist/versioned-components/es/link.js +1 -1
- package/dist/versioned-components/es/navigation-item.js +6 -0
- package/dist/versioned-components/es/popup.js +1 -1
- package/dist/versioned-components/es/register-custom-element.js +1 -0
- package/dist/versioned-components/es/solid-components2.js +1 -1
- package/dist/versioned-components/es/solid-element.js +3 -8
- package/dist/versioned-components/es/spinner.js +1 -1
- package/dist/versioned-components/es/tag.js +1 -1
- package/dist/versioned-components/es/teaser.js +1 -1
- package/dist/versioned-package/components/accordion/accordion.d.ts +1 -1
- package/dist/versioned-package/components/accordion/accordion.js +4 -3
- package/dist/versioned-package/components/accordion-group/accordion-group.d.ts +1 -1
- package/dist/versioned-package/components/accordion-group/accordion-group.js +5 -4
- package/dist/versioned-package/components/badge/badge.d.ts +1 -1
- package/dist/versioned-package/components/badge/badge.js +3 -2
- package/dist/versioned-package/components/brandshape/brandshape.d.ts +1 -1
- package/dist/versioned-package/components/brandshape/brandshape.js +3 -2
- package/dist/versioned-package/components/button/button.d.ts +1 -1
- package/dist/versioned-package/components/button/button.js +6 -5
- package/dist/versioned-package/components/divider/divider.d.ts +1 -1
- package/dist/versioned-package/components/divider/divider.js +4 -3
- package/dist/versioned-package/components/drawer/drawer.d.ts +1 -1
- package/dist/versioned-package/components/drawer/drawer.js +4 -3
- package/dist/versioned-package/components/dropdown/dropdown.d.ts +1 -1
- package/dist/versioned-package/components/dropdown/dropdown.js +8 -7
- package/dist/versioned-package/components/icon/icon.d.ts +1 -1
- package/dist/versioned-package/components/icon/icon.js +3 -2
- package/dist/versioned-package/components/include/include.d.ts +1 -1
- package/dist/versioned-package/components/include/include.js +3 -2
- package/dist/versioned-package/components/link/link.d.ts +1 -1
- package/dist/versioned-package/components/link/link.js +4 -3
- package/dist/versioned-package/components/navigation-item/navigation-item.d.ts +31 -0
- package/dist/versioned-package/components/navigation-item/navigation-item.js +166 -0
- package/dist/versioned-package/components/popup/popup.d.ts +1 -1
- package/dist/versioned-package/components/popup/popup.js +3 -2
- package/dist/versioned-package/components/spinner/spinner.d.ts +1 -1
- package/dist/versioned-package/components/spinner/spinner.js +3 -2
- package/dist/versioned-package/components/tag/tag.d.ts +1 -1
- package/dist/versioned-package/components/tag/tag.js +4 -3
- package/dist/versioned-package/components/teaser/teaser.js +3 -2
- package/dist/versioned-package/internal/form.js +1 -1
- package/dist/versioned-package/internal/register-custom-element.d.ts +19 -0
- package/dist/versioned-package/internal/register-custom-element.js +30 -0
- package/dist/versioned-package/solid-components.d.ts +1 -0
- package/dist/versioned-package/solid-components.js +10 -8
- package/dist/versioned-package/styles/tailwind.css.js +1 -1
- package/dist/versioned-styles/solid-styles.css +1 -1
- package/dist/vscode.html-custom-data.json +195 -15
- package/dist/web-types.json +466 -16
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
import{x as e,i as r}from"./lit-element.js";import{
|
|
1
|
+
import{x as e,i as r}from"./lit-element.js";import{c as t}from"./register-custom-element.js";import{L as s}from"./solid-components2.js";import{S as l,n as o}from"./solid-element.js";import{t as i}from"./classix.js";var a=Object.defineProperty,n=Object.getOwnPropertyDescriptor,c=(e,r,t,s)=>{for(var l,o=s>1?void 0:s?n(r,t):r,i=e.length-1;i>=0;i--)(l=e[i])&&(o=(s?l(r,t,o):l(o))||o);return s&&o&&a(r,t,o),o};let m=class extends l{constructor(){super(...arguments),this.color="currentColor",this.localize=new s(this)}render(){return e`<svg role="progressbar" viewBox="0 0 24 24" class="${i("animate-spin",{primary:"text-primary",white:"text-white",currentColor:""}[this.color])}" aria-label="${this.localize.term("loading")}"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" class="opacity-20" fill="currentColor"/><mask id="mask0_5273_25391" style="mask-type:alpha" maskUnits="userSpaceOnUse"><path d="M24 12C24 5.37258 18.6274 0 12 0V12H24Z" fill="currentColor"/></mask><g mask="url(#mask0_5273_25391)"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12Z" fill="currentColor"/></g></svg>`}};m.styles=[l.styles,r`:host{display:inline-block;width:1em;height:1em}`],c([o({reflect:!0})],m.prototype,"color",2),m=c([t("sd-1-15-0-spinner")],m);export{m as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{i as e}from"./lit-element.js";import{
|
|
1
|
+
import{i as e}from"./lit-element.js";import{c as t}from"./register-custom-element.js";import{i as r,n as s}from"./static.js";import{l as o}from"./if-defined.js";import{S as i,n as a}from"./solid-element.js";import{i as l}from"./query.js";import{t as d}from"./classix.js";var n=Object.defineProperty,p=Object.getOwnPropertyDescriptor,h=(e,t,r,s)=>{for(var o,i=s>1?void 0:s?p(t,r):t,a=e.length-1;a>=0;a--)(o=e[a])&&(i=(s?o(t,r,i):o(i))||i);return s&&i&&n(t,r,i),i};let b=class extends i{constructor(){super(...arguments),this.size="lg",this.selected=!1,this.removable=!1,this.disabled=!1,this.href=""}handleBlur(){this.emit("sd-blur")}handleFocus(){this.emit("sd-focus")}isLink(){return!!this.href}click(){this.tag.click()}focus(e){this.tag.focus(e)}blur(){this.tag.blur()}render(){const e=this.isLink(),t=e?r`a`:r`button`;return s`<${t} part="base" type="${o(e?void 0:"button")}" href="${o(e?this.href:void 0)}" rel="${o(e&&this.target?"noreferrer noopener":void 0)}" target="${o(e?this.target:void 0)}" download="${o(e?this.download:void 0)}" ?disabled="${o(e?void 0:this.disabled)}" aria-disabled="${this.disabled?"true":"false"}" tabindex="${this.disabled?"-1":"0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" class="${d("inline-flex border box-border rounded-full items-center leading-none whitespace-nowrap focus-visible:focus-outline",{lg:"h-8 text-base gap-2",sm:"h-6 text-sm gap-1"}[this.size],{lg:this.removable?"pl-4 pr-3 py-2":"px-4 py-2",sm:this.removable?"pl-3 pr-2 py-2":"px-3 py-[5px]"}[this.size],this.selected?"bg-primary border-primary text-white hover:bg-primary-500 hover:border-primary-500 disabled:bg-neutral-500 disabled:border-neutral-500":"border-primary text-primary hover:border-primary-500 hover:bg-neutral-100 hover:text-primary-500 disabled:border-neutral-500 disabled:text-neutral-500",this.disabled&&!e&&"cursor-not-allowed")}"><slot part="content"></slot><slot part="removable-indicator" name="removable-indicator" class="${d(!this.removable&&"hidden",{lg:"text-base",sm:"text-[12px]"}[this.size])}"><sd-1-15-0-icon library="system" name="close" label="remove"></sd-1-15-0-icon></slot></${t}>`}};b.styles=[i.styles,e`:host{display:inline-block}`],h([l("a, button")],b.prototype,"tag",2),h([a({reflect:!0})],b.prototype,"size",2),h([a({type:Boolean,reflect:!0})],b.prototype,"selected",2),h([a({type:Boolean,reflect:!0})],b.prototype,"removable",2),h([a({type:Boolean,reflect:!0})],b.prototype,"disabled",2),h([a()],b.prototype,"href",2),h([a()],b.prototype,"target",2),h([a()],b.prototype,"download",2),b=h([t("sd-1-15-0-tag")],b);export{b as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{x as t,i as e}from"./lit-element.js";import{
|
|
1
|
+
import{x as t,i as e}from"./lit-element.js";import{c as i}from"./register-custom-element.js";import{H as r}from"./slot.js";import{S as o,n as s}from"./solid-element.js";import{t as a}from"./state.js";import{i as n}from"./query.js";import{t as l}from"./classix.js";var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,p=(t,e,i,r)=>{for(var o,s=r>1?void 0:r?d(e,i):e,a=t.length-1;a>=0;a--)(o=t[a])&&(s=(r?o(e,i,s):o(s))||s);return r&&s&&h(e,i,s),s};let c=class extends o{constructor(){super(...arguments),this.variant="white",this.breakpoint=448,this.inset=!1,this.hasSlotController=new r(this,"[default]","media","meta","headline")}connectedCallback(){super.connectedCallback(),0===this.breakpoint?this._orientation="horizontal":9999===this.breakpoint?this._orientation="vertical":window.ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updateOrientation())),this.resizeObserver.observe(this))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver&&this.resizeObserver.disconnect()}updated(t){super.updated(t),t.has("breakpoint")&&this.updateOrientation()}updateOrientation(){this._orientation=this.offsetWidth>=this.breakpoint?"horizontal":"vertical"}render(){const e="white border-neutral-300"===this.variant||this.inset,i=this.hasSlotController.test("[default]"),r=this.hasSlotController.test("media"),o=this.hasSlotController.test("meta");return this.hasSlotController.test("headline"),t`<div class="${l("flex",{white:"bg-white","white border-neutral-300":"bg-white border border-neutral-300","neutral-100":"bg-neutral-100",primary:"bg-primary text-white","primary-100":"bg-primary-100"}[this.variant],"vertical"===this._orientation&&"flex-col","horizontal"===this._orientation&&"flex-row gap-8","horizontal"===this._orientation&&e&&"py-8 px-10")}" part="base"><div style="${"horizontal"===this._orientation?"width: var(--distribution-media, 100%);":""}" class="${l(!e&&"vertical"===this._orientation&&"mb-4",!r&&"hidden")}" part="media"><slot name="media"></slot></div><div style="${"horizontal"===this._orientation?"width: var(--distribution-content, 100%); "+(e?"width: var(--distribution-content, calc(100% - 2rem));":""):""}" class="${l("flex flex-col text-left","horizontal"===this._orientation&&"flex flex-col","vertical"===this._orientation&&e&&"m-4")}" part="content"><div part="meta" class="${l("gap-2 mb-4",!o&&"hidden")}"><slot name="meta"></slot></div><div part="headline" class="${l("text-lg font-bold m-0","primary"===this.variant?"text-white":"text-black")}"><slot name="headline">Always insert one semantically correct heading element here (e. g. <h2>)</slot></div><div part="main" class="${l(!i&&"hidden")}"><slot></slot></div></div></div>`}};c.styles=[o.styles,e`:host{display:block}::slotted(*){margin:0}::slotted([slot=headline]){font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700;margin:0!important}`],p([s({reflect:!0})],c.prototype,"variant",2),p([s({reflect:!0,type:Number})],c.prototype,"breakpoint",2),p([s({type:Boolean,reflect:!0})],c.prototype,"inset",2),p([n('[part="base"]')],c.prototype,"teaser",2),p([a()],c.prototype,"_orientation",2),c=p([i("sd-1-15-0-teaser")],c);export{c as default};
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import "../icon/icon.js";
|
|
2
2
|
import { stopAnimations, animateTo, shimKeyframesHeightAuto } from "../../internal/animate.js";
|
|
3
3
|
import { css, html } from "lit";
|
|
4
|
-
import {
|
|
4
|
+
import { customElement } from "../../internal/register-custom-element.js";
|
|
5
5
|
import { setDefaultAnimation, getAnimation } from "../../utilities/animation-registry.js";
|
|
6
6
|
import { LocalizeController } from "../../utilities/localize.js";
|
|
7
|
+
import { query, property } from "lit/decorators.js";
|
|
7
8
|
import { waitForEvent } from "../../internal/event.js";
|
|
8
9
|
import { watch } from "../../internal/watch.js";
|
|
9
10
|
import cx from "classix";
|
|
@@ -105,7 +106,7 @@ let SdAccordion = class extends SolidElement {
|
|
|
105
106
|
)}" role="button" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
|
|
106
107
|
"flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-300 text-xl",
|
|
107
108
|
this.open && "rotate-180"
|
|
108
|
-
)}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-1-
|
|
109
|
+
)}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-1-15-0-icon library="system" name="chevron-down"></sd-1-15-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-1-15-0-icon library="system" name="chevron-down"></sd-1-15-0-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`;
|
|
109
110
|
}
|
|
110
111
|
};
|
|
111
112
|
SdAccordion.styles = [
|
|
@@ -131,7 +132,7 @@ __decorateClass([
|
|
|
131
132
|
watch("open", { waitUntilFirstUpdate: true })
|
|
132
133
|
], SdAccordion.prototype, "handleOpenChange", 1);
|
|
133
134
|
SdAccordion = __decorateClass([
|
|
134
|
-
customElement("sd-1-
|
|
135
|
+
customElement("sd-1-15-0-accordion")
|
|
135
136
|
], SdAccordion);
|
|
136
137
|
setDefaultAnimation("accordion.show", {
|
|
137
138
|
keyframes: [
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import "../accordion/accordion.js";
|
|
2
2
|
import { css, html } from "lit";
|
|
3
|
-
import {
|
|
3
|
+
import { customElement } from "../../internal/register-custom-element.js";
|
|
4
|
+
import { queryAssignedElements, property } from "lit/decorators.js";
|
|
4
5
|
import componentStyles from "../../styles/component.styles.js";
|
|
5
6
|
import SolidElement from "../../internal/solid-element.js";
|
|
6
7
|
var __defProp = Object.defineProperty;
|
|
@@ -47,16 +48,16 @@ let SdAccordionGroup = class extends SolidElement {
|
|
|
47
48
|
SdAccordionGroup.styles = [
|
|
48
49
|
componentStyles,
|
|
49
50
|
SolidElement.styles,
|
|
50
|
-
css`:host{display:block}::slotted(sd-1-
|
|
51
|
+
css`:host{display:block}::slotted(sd-1-15-0-accordion:not(:first-of-type)){margin-top:-1px}`
|
|
51
52
|
];
|
|
52
53
|
__decorateClass([
|
|
53
|
-
queryAssignedElements({ selector: "sd-1-
|
|
54
|
+
queryAssignedElements({ selector: "sd-1-15-0-accordion" })
|
|
54
55
|
], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
|
|
55
56
|
__decorateClass([
|
|
56
57
|
property({ attribute: "close-others", type: Boolean })
|
|
57
58
|
], SdAccordionGroup.prototype, "closeOthers", 2);
|
|
58
59
|
SdAccordionGroup = __decorateClass([
|
|
59
|
-
customElement("sd-1-
|
|
60
|
+
customElement("sd-1-15-0-accordion-group")
|
|
60
61
|
], SdAccordionGroup);
|
|
61
62
|
export {
|
|
62
63
|
SdAccordionGroup as default
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { css, html } from "lit";
|
|
2
|
-
import {
|
|
2
|
+
import { customElement } from "../../internal/register-custom-element.js";
|
|
3
|
+
import { property } from "lit/decorators.js";
|
|
3
4
|
import cx from "classix";
|
|
4
5
|
import SolidElement from "../../internal/solid-element.js";
|
|
5
6
|
var __defProp = Object.defineProperty;
|
|
@@ -52,7 +53,7 @@ __decorateClass([
|
|
|
52
53
|
property({ type: Boolean, reflect: true })
|
|
53
54
|
], SdBadge.prototype, "inverted", 2);
|
|
54
55
|
SdBadge = __decorateClass([
|
|
55
|
-
customElement("sd-1-
|
|
56
|
+
customElement("sd-1-15-0-badge")
|
|
56
57
|
], SdBadge);
|
|
57
58
|
export {
|
|
58
59
|
SdBadge as default
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { css, html } from "lit";
|
|
2
|
-
import {
|
|
2
|
+
import { customElement } from "../../internal/register-custom-element.js";
|
|
3
|
+
import { query, property, state } from "lit/decorators.js";
|
|
3
4
|
import componentStyles from "../../styles/component.styles.js";
|
|
4
5
|
import cx from "classix";
|
|
5
6
|
import SolidElement from "../../internal/solid-element.js";
|
|
@@ -122,7 +123,7 @@ __decorateClass([
|
|
|
122
123
|
state()
|
|
123
124
|
], SdBrandshape.prototype, "componentBreakpoint", 2);
|
|
124
125
|
SdBrandshape = __decorateClass([
|
|
125
|
-
customElement("sd-1-
|
|
126
|
+
customElement("sd-1-15-0-brandshape")
|
|
126
127
|
], SdBrandshape);
|
|
127
128
|
export {
|
|
128
129
|
SdBrandshape as default
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import "../spinner/spinner.js";
|
|
2
2
|
import { css } from "lit";
|
|
3
|
-
import {
|
|
3
|
+
import { customElement } from "../../internal/register-custom-element.js";
|
|
4
4
|
import { FormControlController } from "../../internal/form.js";
|
|
5
5
|
import { HasSlotController } from "../../internal/slot.js";
|
|
6
6
|
import { literal, html } from "lit/static-html.js";
|
|
7
7
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
8
|
+
import { query, queryAssignedElements, state, property } from "lit/decorators.js";
|
|
8
9
|
import { watch } from "../../internal/watch.js";
|
|
9
10
|
import componentStyles from "../../styles/component.styles.js";
|
|
10
11
|
import cx from "classix";
|
|
@@ -190,19 +191,19 @@ let SdButton = class extends SolidElement {
|
|
|
190
191
|
md: "ml-2",
|
|
191
192
|
lg: "ml-2"
|
|
192
193
|
}[this.size]
|
|
193
|
-
)}"></slot>${this.loading ? html`<sd-1-
|
|
194
|
+
)}"></slot>${this.loading ? html`<sd-1-15-0-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-1-15-0-spinner>` : ""}</${tag}>`;
|
|
194
195
|
}
|
|
195
196
|
};
|
|
196
197
|
SdButton.styles = [
|
|
197
198
|
componentStyles,
|
|
198
199
|
SolidElement.styles,
|
|
199
|
-
css`:host{display:inline-block;position:relative;width:auto;cursor:pointer}sd-1-
|
|
200
|
+
css`:host{display:inline-block;position:relative;width:auto;cursor:pointer}sd-1-15-0-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-1-15-0-badge){position:absolute;top:0;right:0;translate:50% -50%;pointer-events:none}::slotted(sd-1-15-0-icon),sd-1-15-0-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`
|
|
200
201
|
];
|
|
201
202
|
__decorateClass([
|
|
202
203
|
query("a, button")
|
|
203
204
|
], SdButton.prototype, "button", 2);
|
|
204
205
|
__decorateClass([
|
|
205
|
-
queryAssignedElements({ selector: "sd-1-
|
|
206
|
+
queryAssignedElements({ selector: "sd-1-15-0-icon" })
|
|
206
207
|
], SdButton.prototype, "_iconsInDefaultSlot", 2);
|
|
207
208
|
__decorateClass([
|
|
208
209
|
state()
|
|
@@ -265,7 +266,7 @@ __decorateClass([
|
|
|
265
266
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
266
267
|
], SdButton.prototype, "handleDisabledChange", 1);
|
|
267
268
|
SdButton = __decorateClass([
|
|
268
|
-
customElement("sd-1-
|
|
269
|
+
customElement("sd-1-15-0-button")
|
|
269
270
|
], SdButton);
|
|
270
271
|
export {
|
|
271
272
|
SdButton as default
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { css, html } from "lit";
|
|
2
|
-
import {
|
|
2
|
+
import { customElement } from "../../internal/register-custom-element.js";
|
|
3
|
+
import { property } from "lit/decorators.js";
|
|
3
4
|
import componentStyles from "../../styles/component.styles.js";
|
|
4
5
|
import cx from "classix";
|
|
5
6
|
import SolidElement from "../../internal/solid-element.js";
|
|
@@ -34,7 +35,7 @@ let SdDivider = class extends SolidElement {
|
|
|
34
35
|
SdDivider.styles = [
|
|
35
36
|
componentStyles,
|
|
36
37
|
SolidElement.styles,
|
|
37
|
-
css`:host{margin:0}:host(sd-1-
|
|
38
|
+
css`:host{margin:0}:host(sd-1-15-0-divider[orientation=horizontal]){display:block}:host(sd-1-15-0-divider[orientation=vertical]){display:inline-block}`
|
|
38
39
|
];
|
|
39
40
|
__decorateClass([
|
|
40
41
|
property({ reflect: true })
|
|
@@ -43,7 +44,7 @@ __decorateClass([
|
|
|
43
44
|
property({ type: Boolean, reflect: true })
|
|
44
45
|
], SdDivider.prototype, "inverted", 2);
|
|
45
46
|
SdDivider = __decorateClass([
|
|
46
|
-
customElement("sd-1-
|
|
47
|
+
customElement("sd-1-15-0-divider")
|
|
47
48
|
], SdDivider);
|
|
48
49
|
export {
|
|
49
50
|
SdDivider as default
|
|
@@ -2,12 +2,13 @@ import "../button/button.js";
|
|
|
2
2
|
import "../icon/icon.js";
|
|
3
3
|
import { animateTo, stopAnimations } from "../../internal/animate.js";
|
|
4
4
|
import { css, html } from "lit";
|
|
5
|
-
import {
|
|
5
|
+
import { customElement } from "../../internal/register-custom-element.js";
|
|
6
6
|
import { setDefaultAnimation, getAnimation } from "../../utilities/animation-registry.js";
|
|
7
7
|
import { HasSlotController } from "../../internal/slot.js";
|
|
8
8
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
9
9
|
import { LocalizeController } from "../../utilities/localize.js";
|
|
10
10
|
import { lockBodyScrolling, unlockBodyScrolling } from "../../internal/scroll.js";
|
|
11
|
+
import { query, property } from "lit/decorators.js";
|
|
11
12
|
import { uppercaseFirstLetter } from "../../internal/string.js";
|
|
12
13
|
import { waitForEvent } from "../../internal/event.js";
|
|
13
14
|
import { watch } from "../../internal/watch.js";
|
|
@@ -182,7 +183,7 @@ let SdDrawer = class extends SolidElement {
|
|
|
182
183
|
end: "top-0 end-0 bottom-auto start-auto w-[--width] h-full",
|
|
183
184
|
start: "top-0 end-auto bottom-auto start-0 w-[--width] h-full"
|
|
184
185
|
}[this.placement]
|
|
185
|
-
)}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.label}" aria-labelledby="${ifDefined(!this.noHeader ? "title" : void 0)}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-1-
|
|
186
|
+
)}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${this.label}" aria-labelledby="${ifDefined(!this.noHeader ? "title" : void 0)}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-1-15-0-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-1-15-0-icon name="close" library="system"></sd-1-15-0-icon></sd-1-15-0-button></div></header>` : ""}<div part="body" class="flex-auto block px-4"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></div>`;
|
|
186
187
|
}
|
|
187
188
|
};
|
|
188
189
|
SdDrawer.styles = [
|
|
@@ -220,7 +221,7 @@ __decorateClass([
|
|
|
220
221
|
watch("contained", { waitUntilFirstUpdate: true })
|
|
221
222
|
], SdDrawer.prototype, "handleNoModalChange", 1);
|
|
222
223
|
SdDrawer = __decorateClass([
|
|
223
|
-
customElement("sd-1-
|
|
224
|
+
customElement("sd-1-15-0-drawer")
|
|
224
225
|
], SdDrawer);
|
|
225
226
|
setDefaultAnimation("drawer.showStart", {
|
|
226
227
|
keyframes: [
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import "../popup/popup.js";
|
|
2
2
|
import { stopAnimations, animateTo } from "../../internal/animate.js";
|
|
3
3
|
import { css, html } from "lit";
|
|
4
|
-
import {
|
|
4
|
+
import { customElement } from "../../internal/register-custom-element.js";
|
|
5
5
|
import { setDefaultAnimation, getAnimation } from "../../utilities/animation-registry.js";
|
|
6
6
|
import { getTabbableBoundary } from "../../internal/tabbable.js";
|
|
7
7
|
import { LocalizeController } from "../../utilities/localize.js";
|
|
8
|
+
import { query, property } from "lit/decorators.js";
|
|
8
9
|
import { scrollIntoView } from "../../internal/scroll.js";
|
|
9
10
|
import { waitForEvent } from "../../internal/event.js";
|
|
10
11
|
import { watch } from "../../internal/watch.js";
|
|
@@ -169,7 +170,7 @@ let SdDropdown = class extends SolidElement {
|
|
|
169
170
|
// that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
|
|
170
171
|
// a child of the slotted element, or an element in the slotted element's shadow root.
|
|
171
172
|
//
|
|
172
|
-
// For example, the accessible trigger of an <sd-1-
|
|
173
|
+
// For example, the accessible trigger of an <sd-1-15-0-button> is a <button> located inside its shadow root.
|
|
173
174
|
//
|
|
174
175
|
// To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
|
|
175
176
|
//
|
|
@@ -179,8 +180,8 @@ let SdDropdown = class extends SolidElement {
|
|
|
179
180
|
let target;
|
|
180
181
|
if (accessibleTrigger) {
|
|
181
182
|
switch (accessibleTrigger.tagName.toLowerCase()) {
|
|
182
|
-
case "sd-1-
|
|
183
|
-
case "sd-1-
|
|
183
|
+
case "sd-1-15-0-button":
|
|
184
|
+
case "sd-1-15-0-icon-button":
|
|
184
185
|
target = accessibleTrigger.button;
|
|
185
186
|
break;
|
|
186
187
|
default:
|
|
@@ -256,11 +257,11 @@ let SdDropdown = class extends SolidElement {
|
|
|
256
257
|
}
|
|
257
258
|
}
|
|
258
259
|
render() {
|
|
259
|
-
return html`<sd-1-
|
|
260
|
+
return html`<sd-1-15-0-popup part="base" id="dropdown" placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10" ?active="${this.open}"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
|
|
260
261
|
"shadow bg-white",
|
|
261
262
|
this.open ? "block pointer-events-auto" : "pointer-events-none",
|
|
262
263
|
this.rounded && "rounded-md"
|
|
263
|
-
)}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-1-
|
|
264
|
+
)}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-1-15-0-popup>`;
|
|
264
265
|
}
|
|
265
266
|
};
|
|
266
267
|
SdDropdown.styles = [
|
|
@@ -314,7 +315,7 @@ __decorateClass([
|
|
|
314
315
|
watch("open", { waitUntilFirstUpdate: true })
|
|
315
316
|
], SdDropdown.prototype, "handleOpenChange", 1);
|
|
316
317
|
SdDropdown = __decorateClass([
|
|
317
|
-
customElement("sd-1-
|
|
318
|
+
customElement("sd-1-15-0-dropdown")
|
|
318
319
|
], SdDropdown);
|
|
319
320
|
setDefaultAnimation("dropdown.show", {
|
|
320
321
|
keyframes: [
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { css, html } from "lit";
|
|
2
|
-
import {
|
|
2
|
+
import { customElement } from "../../internal/register-custom-element.js";
|
|
3
3
|
import { watchIcon, unwatchIcon, getIconLibrary } from "./library.js";
|
|
4
|
+
import { state, property } from "lit/decorators.js";
|
|
4
5
|
import { requestIcon } from "./request.js";
|
|
5
6
|
import { unsafeSVG } from "lit/directives/unsafe-svg.js";
|
|
6
7
|
import { watch } from "../../internal/watch.js";
|
|
@@ -122,7 +123,7 @@ __decorateClass([
|
|
|
122
123
|
watch(["name", "src", "library"])
|
|
123
124
|
], SdIcon.prototype, "setIcon", 1);
|
|
124
125
|
SdIcon = __decorateClass([
|
|
125
|
-
customElement("sd-1-
|
|
126
|
+
customElement("sd-1-15-0-icon")
|
|
126
127
|
], SdIcon);
|
|
127
128
|
export {
|
|
128
129
|
SdIcon as default
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { customElement } from "../../internal/register-custom-element.js";
|
|
2
2
|
import { html } from "lit";
|
|
3
|
+
import { property } from "lit/decorators.js";
|
|
3
4
|
import { requestInclude } from "./request.js";
|
|
4
5
|
import { watch } from "../../internal/watch.js";
|
|
5
6
|
import SolidElement from "../../internal/solid-element.js";
|
|
@@ -65,7 +66,7 @@ __decorateClass([
|
|
|
65
66
|
watch("src")
|
|
66
67
|
], SdInclude.prototype, "handleSrcChange", 1);
|
|
67
68
|
SdInclude = __decorateClass([
|
|
68
|
-
customElement("sd-1-
|
|
69
|
+
customElement("sd-1-15-0-include")
|
|
69
70
|
], SdInclude);
|
|
70
71
|
export {
|
|
71
72
|
SdInclude as default
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { css, html } from "lit";
|
|
2
|
-
import {
|
|
2
|
+
import { customElement } from "../../internal/register-custom-element.js";
|
|
3
3
|
import { HasSlotController } from "../../internal/slot.js";
|
|
4
4
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
5
|
+
import { query, property } from "lit/decorators.js";
|
|
5
6
|
import cx from "classix";
|
|
6
7
|
import SolidElement from "../../internal/solid-element.js";
|
|
7
8
|
var __defProp = Object.defineProperty;
|
|
@@ -76,7 +77,7 @@ let SdLink = class extends SolidElement {
|
|
|
76
77
|
};
|
|
77
78
|
SdLink.styles = [
|
|
78
79
|
SolidElement.styles,
|
|
79
|
-
css`::slotted(sd-1-
|
|
80
|
+
css`::slotted(sd-1-15-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-1-15-0-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-1-15-0-icon){font-size:1.5rem}`
|
|
80
81
|
];
|
|
81
82
|
__decorateClass([
|
|
82
83
|
query("a")
|
|
@@ -100,7 +101,7 @@ __decorateClass([
|
|
|
100
101
|
property()
|
|
101
102
|
], SdLink.prototype, "download", 2);
|
|
102
103
|
SdLink = __decorateClass([
|
|
103
|
-
customElement("sd-1-
|
|
104
|
+
customElement("sd-1-15-0-link")
|
|
104
105
|
], SdLink);
|
|
105
106
|
export {
|
|
106
107
|
SdLink as default
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import SolidElement from '../../internal/solid-element';
|
|
2
|
+
export default class SdNavigationItem extends SolidElement {
|
|
3
|
+
private readonly hasSlotController;
|
|
4
|
+
href: string;
|
|
5
|
+
target: '_blank' | '_parent' | '_self' | '_top';
|
|
6
|
+
download?: string;
|
|
7
|
+
current: boolean;
|
|
8
|
+
disabled: boolean;
|
|
9
|
+
size: 'base' | 'lg' | 'sm';
|
|
10
|
+
vertical: boolean;
|
|
11
|
+
chevron: boolean;
|
|
12
|
+
indented: boolean;
|
|
13
|
+
relaxed: boolean;
|
|
14
|
+
divider: boolean;
|
|
15
|
+
open: boolean;
|
|
16
|
+
private isButton;
|
|
17
|
+
private isLink;
|
|
18
|
+
private isAccordion;
|
|
19
|
+
private handleClickButton;
|
|
20
|
+
private handleClickSummary;
|
|
21
|
+
private hideDetails;
|
|
22
|
+
private showDetails;
|
|
23
|
+
private calculatePaddingX;
|
|
24
|
+
render(): import("lit-html").TemplateResult;
|
|
25
|
+
static styles: import("lit").CSSResultGroup[];
|
|
26
|
+
}
|
|
27
|
+
declare global {
|
|
28
|
+
interface HTMLElementTagNameMap {
|
|
29
|
+
'sd-1-15-0-navigation-item': SdNavigationItem;
|
|
30
|
+
}
|
|
31
|
+
}
|