@warp-ds/elements 2.2.0-next.19 → 2.2.0-next.20
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/custom-elements.json +133 -102
- package/dist/index.d.ts +31 -31
- package/dist/packages/box/index.js +11 -4
- package/dist/packages/box/index.js.map +3 -3
- package/dist/packages/button/index.js +17 -11
- package/dist/packages/button/index.js.map +3 -3
- package/dist/packages/rip-and-tear-radio/index.js +22 -24
- package/dist/packages/rip-and-tear-radio/index.js.map +2 -2
- package/dist/packages/rip-and-tear-radio/radio-group.js +22 -24
- package/dist/packages/rip-and-tear-radio/radio-group.js.map +2 -2
- package/dist/packages/rip-and-tear-radio/radio-styles.js +22 -24
- package/dist/packages/rip-and-tear-radio/radio-styles.js.map +2 -2
- package/dist/packages/rip-and-tear-radio/radio.js +22 -24
- package/dist/packages/rip-and-tear-radio/radio.js.map +2 -2
- package/dist/packages/rip-and-tear-radio/radio.stories.d.ts +8 -0
- package/dist/packages/rip-and-tear-radio/radio.stories.js +275 -0
- package/dist/packages/rip-and-tear-radio/radio.stories.js.map +7 -0
- package/dist/vscode.html-custom-data.json +18 -18
- package/dist/web-types.json +35 -35
- package/package.json +1 -1
|
@@ -143,6 +143,107 @@
|
|
|
143
143
|
}
|
|
144
144
|
]
|
|
145
145
|
},
|
|
146
|
+
{
|
|
147
|
+
"kind": "javascript-module",
|
|
148
|
+
"path": "packages/alert/index.ts",
|
|
149
|
+
"declarations": [
|
|
150
|
+
{
|
|
151
|
+
"kind": "class",
|
|
152
|
+
"description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)",
|
|
153
|
+
"name": "WarpAlert",
|
|
154
|
+
"members": [
|
|
155
|
+
{
|
|
156
|
+
"kind": "field",
|
|
157
|
+
"name": "variant",
|
|
158
|
+
"type": {
|
|
159
|
+
"text": "AlertVariants"
|
|
160
|
+
},
|
|
161
|
+
"default": "'info'",
|
|
162
|
+
"attribute": "variant",
|
|
163
|
+
"reflects": true,
|
|
164
|
+
"parsedType": {
|
|
165
|
+
"text": "'negative' | 'positive' | 'warning' | 'info'"
|
|
166
|
+
}
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
"kind": "field",
|
|
170
|
+
"name": "show",
|
|
171
|
+
"type": {
|
|
172
|
+
"text": "boolean"
|
|
173
|
+
},
|
|
174
|
+
"default": "false",
|
|
175
|
+
"attribute": "show",
|
|
176
|
+
"reflects": true
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"kind": "field",
|
|
180
|
+
"name": "role",
|
|
181
|
+
"type": {
|
|
182
|
+
"text": "string"
|
|
183
|
+
},
|
|
184
|
+
"default": "'alert'",
|
|
185
|
+
"attribute": "role",
|
|
186
|
+
"reflects": true
|
|
187
|
+
}
|
|
188
|
+
],
|
|
189
|
+
"attributes": [
|
|
190
|
+
{
|
|
191
|
+
"name": "variant",
|
|
192
|
+
"type": {
|
|
193
|
+
"text": "AlertVariants"
|
|
194
|
+
},
|
|
195
|
+
"default": "'info'",
|
|
196
|
+
"fieldName": "variant",
|
|
197
|
+
"parsedType": {
|
|
198
|
+
"text": "'negative' | 'positive' | 'warning' | 'info'"
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
"name": "show",
|
|
203
|
+
"type": {
|
|
204
|
+
"text": "boolean"
|
|
205
|
+
},
|
|
206
|
+
"default": "false",
|
|
207
|
+
"fieldName": "show"
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"name": "role",
|
|
211
|
+
"type": {
|
|
212
|
+
"text": "string"
|
|
213
|
+
},
|
|
214
|
+
"default": "'alert'",
|
|
215
|
+
"fieldName": "role"
|
|
216
|
+
}
|
|
217
|
+
],
|
|
218
|
+
"superclass": {
|
|
219
|
+
"name": "LitElement",
|
|
220
|
+
"package": "lit"
|
|
221
|
+
},
|
|
222
|
+
"tagName": "w-alert",
|
|
223
|
+
"customElement": true,
|
|
224
|
+
"modulePath": "packages/alert/index.ts",
|
|
225
|
+
"definitionPath": "packages/alert/index.ts"
|
|
226
|
+
}
|
|
227
|
+
],
|
|
228
|
+
"exports": [
|
|
229
|
+
{
|
|
230
|
+
"kind": "custom-element-definition",
|
|
231
|
+
"name": "w-alert",
|
|
232
|
+
"declaration": {
|
|
233
|
+
"name": "WarpAlert",
|
|
234
|
+
"module": "packages/alert/index.ts"
|
|
235
|
+
}
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"kind": "js",
|
|
239
|
+
"name": "WarpAlert",
|
|
240
|
+
"declaration": {
|
|
241
|
+
"name": "WarpAlert",
|
|
242
|
+
"module": "packages/alert/index.ts"
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
]
|
|
246
|
+
},
|
|
146
247
|
{
|
|
147
248
|
"kind": "javascript-module",
|
|
148
249
|
"path": "packages/utils/index.js",
|
|
@@ -584,107 +685,6 @@
|
|
|
584
685
|
}
|
|
585
686
|
]
|
|
586
687
|
},
|
|
587
|
-
{
|
|
588
|
-
"kind": "javascript-module",
|
|
589
|
-
"path": "packages/alert/index.ts",
|
|
590
|
-
"declarations": [
|
|
591
|
-
{
|
|
592
|
-
"kind": "class",
|
|
593
|
-
"description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)",
|
|
594
|
-
"name": "WarpAlert",
|
|
595
|
-
"members": [
|
|
596
|
-
{
|
|
597
|
-
"kind": "field",
|
|
598
|
-
"name": "variant",
|
|
599
|
-
"type": {
|
|
600
|
-
"text": "AlertVariants"
|
|
601
|
-
},
|
|
602
|
-
"default": "'info'",
|
|
603
|
-
"attribute": "variant",
|
|
604
|
-
"reflects": true,
|
|
605
|
-
"parsedType": {
|
|
606
|
-
"text": "'negative' | 'positive' | 'warning' | 'info'"
|
|
607
|
-
}
|
|
608
|
-
},
|
|
609
|
-
{
|
|
610
|
-
"kind": "field",
|
|
611
|
-
"name": "show",
|
|
612
|
-
"type": {
|
|
613
|
-
"text": "boolean"
|
|
614
|
-
},
|
|
615
|
-
"default": "false",
|
|
616
|
-
"attribute": "show",
|
|
617
|
-
"reflects": true
|
|
618
|
-
},
|
|
619
|
-
{
|
|
620
|
-
"kind": "field",
|
|
621
|
-
"name": "role",
|
|
622
|
-
"type": {
|
|
623
|
-
"text": "string"
|
|
624
|
-
},
|
|
625
|
-
"default": "'alert'",
|
|
626
|
-
"attribute": "role",
|
|
627
|
-
"reflects": true
|
|
628
|
-
}
|
|
629
|
-
],
|
|
630
|
-
"attributes": [
|
|
631
|
-
{
|
|
632
|
-
"name": "variant",
|
|
633
|
-
"type": {
|
|
634
|
-
"text": "AlertVariants"
|
|
635
|
-
},
|
|
636
|
-
"default": "'info'",
|
|
637
|
-
"fieldName": "variant",
|
|
638
|
-
"parsedType": {
|
|
639
|
-
"text": "'negative' | 'positive' | 'warning' | 'info'"
|
|
640
|
-
}
|
|
641
|
-
},
|
|
642
|
-
{
|
|
643
|
-
"name": "show",
|
|
644
|
-
"type": {
|
|
645
|
-
"text": "boolean"
|
|
646
|
-
},
|
|
647
|
-
"default": "false",
|
|
648
|
-
"fieldName": "show"
|
|
649
|
-
},
|
|
650
|
-
{
|
|
651
|
-
"name": "role",
|
|
652
|
-
"type": {
|
|
653
|
-
"text": "string"
|
|
654
|
-
},
|
|
655
|
-
"default": "'alert'",
|
|
656
|
-
"fieldName": "role"
|
|
657
|
-
}
|
|
658
|
-
],
|
|
659
|
-
"superclass": {
|
|
660
|
-
"name": "LitElement",
|
|
661
|
-
"package": "lit"
|
|
662
|
-
},
|
|
663
|
-
"tagName": "w-alert",
|
|
664
|
-
"customElement": true,
|
|
665
|
-
"modulePath": "packages/alert/index.ts",
|
|
666
|
-
"definitionPath": "packages/alert/index.ts"
|
|
667
|
-
}
|
|
668
|
-
],
|
|
669
|
-
"exports": [
|
|
670
|
-
{
|
|
671
|
-
"kind": "custom-element-definition",
|
|
672
|
-
"name": "w-alert",
|
|
673
|
-
"declaration": {
|
|
674
|
-
"name": "WarpAlert",
|
|
675
|
-
"module": "packages/alert/index.ts"
|
|
676
|
-
}
|
|
677
|
-
},
|
|
678
|
-
{
|
|
679
|
-
"kind": "js",
|
|
680
|
-
"name": "WarpAlert",
|
|
681
|
-
"declaration": {
|
|
682
|
-
"name": "WarpAlert",
|
|
683
|
-
"module": "packages/alert/index.ts"
|
|
684
|
-
}
|
|
685
|
-
}
|
|
686
|
-
]
|
|
687
|
-
},
|
|
688
688
|
{
|
|
689
689
|
"kind": "javascript-module",
|
|
690
690
|
"path": "packages/badge/index.ts",
|
|
@@ -4216,7 +4216,7 @@
|
|
|
4216
4216
|
{
|
|
4217
4217
|
"kind": "variable",
|
|
4218
4218
|
"name": "styles",
|
|
4219
|
-
"default": "css` :host { color: var(--wa-form-control-value-color); display: inline-flex; flex-direction: row; align-items: top; font-family: inherit; font-weight: var(--wa-form-control-value-font-weight); line-height: var(--wa-form-control-value-line-height); cursor: pointer; user-select: none; -webkit-user-select: none; } :host(:focus) { outline: none; } [part~='label'] { display: inline; } [part~='hint'] { margin-block-start: 0.5em; } /* Default appearance */ :host([appearance='default'])
|
|
4219
|
+
"default": "css` :host { color: var(--wa-form-control-value-color); display: inline-flex; flex-direction: row; align-items: top; font-family: inherit; font-weight: var(--wa-form-control-value-font-weight); line-height: var(--wa-form-control-value-line-height); cursor: pointer; user-select: none; -webkit-user-select: none; } :host(:focus) { outline: none; } [part~='label'] { display: inline; } [part~='hint'] { margin-block-start: 0.5em; } /* Default appearance */ :host([appearance='default']) .control { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--wa-form-control-toggle-size, 2rem); height: var(--wa-form-control-toggle-size, 2rem); border-color: var(--wa-form-control-border-color, gray); border-radius: 50%; border-style: var(--wa-form-control-border-style, solid); border-width: var(--wa-form-control-border-width, 1px); background-color: var(--wa-form-control-background-color, white); color: transparent; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; margin-inline-end: 0.5em; } :host([appearance='clickable']) .control { position: absolute; inset: 0; height: 100%; width: 100%; cursor: pointer; } /* Checked */ :host(:state(checked)):not(:host([appearance='clickable'])) .control { /* color: var(--checked-icon-color, white); */ border-color: var(--wa-form-control-activated-color, blue); background-color: var(--wa-form-control-background-color, white); border-width: 0.6rem; } /* Focus */ :host(:focus-visible) .control { outline: 2px solid var(--w-s-color-border-focus); outline-offset: var(--w-outline-offset, 1px); } :host([appearance='clickable']:focus-visible) .control { outline-offset: -4px; border-radius: 8px; } /* Disabled */ :host(:state(disabled)) { opacity: 0.5; cursor: not-allowed; } /* Button appearance */ :host([appearance='button']) { align-items: center; min-height: var(--wa-form-control-height); background-color: var(--wa-color-surface-default); border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color); border-radius: var(--wa-border-radius-m); padding: 0 var(--wa-form-control-padding-inline); transition: background-color var(--wa-transition-fast), border-color var(--wa-transition-fast); } :host([appearance='button']) .control { display: none; } /* Horizontal grouping - remove inner border radius */ :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-inner]) { border-radius: 0; } :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-first]) { border-start-end-radius: 0; border-end-end-radius: 0; } :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-last]) { border-start-start-radius: 0; border-end-start-radius: 0; } /* Vertical grouping - remove inner border radius */ :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-inner]) { border-radius: 0; } :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-first]) { border-end-start-radius: 0; border-end-end-radius: 0; } :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-last]) { border-start-start-radius: 0; border-start-end-radius: 0; } @media (hover: hover) { :host([appearance='button']:hover:not(:state(disabled), :state(checked))) { background-color: color-mix(in srgb, var(--wa-color-surface-default) 95%, var(--wa-color-mix-hover)); } } :host([appearance='button']:focus-visible) { outline: var(--wa-focus-ring); outline-offset: var(--wa-focus-ring-offset); } :host([appearance='button']:state(checked)) { border-color: var(--wa-form-control-activated-color); background-color: var(--wa-color-brand-fill-quiet); } :host([appearance='button']:state(checked):focus-visible) { outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-brand-border-loud); outline-offset: var(--wa-focus-ring-offset); } /* Remove inner borders and handle overlap */ :host([appearance='button'][data-wa-radio-horizontal]:not([data-wa-radio-first])) { margin-inline-start: calc(-1 * var(--wa-form-control-border-width)); } :host([appearance='button'][data-wa-radio-vertical]:not([data-wa-radio-first])) { margin-block-start: calc(-1 * var(--wa-form-control-border-width)); } /* Ensure interactive states are visible above adjacent buttons */ :host([appearance='button']:hover), :host([appearance='button']:state(checked)) { position: relative; z-index: 1; } :host([appearance='button']:focus-visible) { z-index: 2; } `"
|
|
4220
4220
|
}
|
|
4221
4221
|
],
|
|
4222
4222
|
"exports": [
|
|
@@ -6910,6 +6910,37 @@
|
|
|
6910
6910
|
}
|
|
6911
6911
|
]
|
|
6912
6912
|
},
|
|
6913
|
+
{
|
|
6914
|
+
"kind": "javascript-module",
|
|
6915
|
+
"path": "packages/rip-and-tear-radio/radio.stories.ts",
|
|
6916
|
+
"declarations": [
|
|
6917
|
+
{
|
|
6918
|
+
"kind": "variable",
|
|
6919
|
+
"name": "Default",
|
|
6920
|
+
"type": {
|
|
6921
|
+
"text": "StoryObj"
|
|
6922
|
+
},
|
|
6923
|
+
"default": "{}"
|
|
6924
|
+
}
|
|
6925
|
+
],
|
|
6926
|
+
"exports": [
|
|
6927
|
+
{
|
|
6928
|
+
"kind": "js",
|
|
6929
|
+
"name": "default",
|
|
6930
|
+
"declaration": {
|
|
6931
|
+
"module": "packages/rip-and-tear-radio/radio.stories.ts"
|
|
6932
|
+
}
|
|
6933
|
+
},
|
|
6934
|
+
{
|
|
6935
|
+
"kind": "js",
|
|
6936
|
+
"name": "Default",
|
|
6937
|
+
"declaration": {
|
|
6938
|
+
"name": "Default",
|
|
6939
|
+
"module": "packages/rip-and-tear-radio/radio.stories.ts"
|
|
6940
|
+
}
|
|
6941
|
+
}
|
|
6942
|
+
]
|
|
6943
|
+
},
|
|
6913
6944
|
{
|
|
6914
6945
|
"kind": "javascript-module",
|
|
6915
6946
|
"path": "packages/tabs/tabs.stories.ts",
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
import type { ccSuffix, ccPrefix, WarpAffix } from "./packages/affix/index.ts";
|
|
3
|
-
import type { ccAttention, WarpAttention } from "./packages/attention/index.ts";
|
|
4
3
|
import type { WarpAlert } from "./packages/alert/index.ts";
|
|
4
|
+
import type { ccAttention, WarpAttention } from "./packages/attention/index.ts";
|
|
5
5
|
import type { WarpBadge } from "./packages/badge/index.ts";
|
|
6
6
|
import type { WarpBox } from "./packages/box/index.ts";
|
|
7
7
|
import type { ccBreadcrumbs, WarpBreadcrumbs } from "./packages/breadcrumbs/index.ts";
|
|
@@ -130,6 +130,18 @@ Set an `aria-label` that explains the action when using this. */
|
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
|
|
133
|
+
export type WarpAlertProps = {
|
|
134
|
+
/** */
|
|
135
|
+
"variant"?: WarpAlert['variant'];
|
|
136
|
+
/** */
|
|
137
|
+
"show"?: WarpAlert['show'];
|
|
138
|
+
/** */
|
|
139
|
+
"role"?: WarpAlert['role'];
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
|
|
133
145
|
export type WarpAttentionProps = {
|
|
134
146
|
/** */
|
|
135
147
|
"show"?: WarpAttention['show'];
|
|
@@ -174,18 +186,6 @@ export type WarpAttentionProps = {
|
|
|
174
186
|
}
|
|
175
187
|
|
|
176
188
|
|
|
177
|
-
export type WarpAlertProps = {
|
|
178
|
-
/** */
|
|
179
|
-
"variant"?: WarpAlert['variant'];
|
|
180
|
-
/** */
|
|
181
|
-
"show"?: WarpAlert['show'];
|
|
182
|
-
/** */
|
|
183
|
-
"role"?: WarpAlert['role'];
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
|
|
189
189
|
export type WarpBadgeProps = {
|
|
190
190
|
/** */
|
|
191
191
|
"variant"?: WarpBadge['variant'];
|
|
@@ -937,6 +937,24 @@ export type WarpTabPanelProps = {
|
|
|
937
937
|
"w-affix": Partial<WarpAffixProps & BaseProps<WarpAffix> & BaseEvents>;
|
|
938
938
|
|
|
939
939
|
|
|
940
|
+
/**
|
|
941
|
+
* Alert is an inline component used for displaying different types of messages.
|
|
942
|
+
*
|
|
943
|
+
* For accessibility reasons, alert should appear close to the element that triggered it.
|
|
944
|
+
*
|
|
945
|
+
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
|
|
946
|
+
*
|
|
947
|
+
* ## Attributes & Properties
|
|
948
|
+
*
|
|
949
|
+
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
950
|
+
*
|
|
951
|
+
* - `variant`: undefined
|
|
952
|
+
* - `show`: undefined
|
|
953
|
+
* - `role`: undefined
|
|
954
|
+
*/
|
|
955
|
+
"w-alert": Partial<WarpAlertProps & BaseProps<WarpAlert> & BaseEvents>;
|
|
956
|
+
|
|
957
|
+
|
|
940
958
|
/**
|
|
941
959
|
*
|
|
942
960
|
*
|
|
@@ -975,24 +993,6 @@ export type WarpTabPanelProps = {
|
|
|
975
993
|
"w-attention": Partial<WarpAttentionProps & BaseProps<WarpAttention> & BaseEvents>;
|
|
976
994
|
|
|
977
995
|
|
|
978
|
-
/**
|
|
979
|
-
* Alert is an inline component used for displaying different types of messages.
|
|
980
|
-
*
|
|
981
|
-
* For accessibility reasons, alert should appear close to the element that triggered it.
|
|
982
|
-
*
|
|
983
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
|
|
984
|
-
*
|
|
985
|
-
* ## Attributes & Properties
|
|
986
|
-
*
|
|
987
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
988
|
-
*
|
|
989
|
-
* - `variant`: undefined
|
|
990
|
-
* - `show`: undefined
|
|
991
|
-
* - `role`: undefined
|
|
992
|
-
*/
|
|
993
|
-
"w-alert": Partial<WarpAlertProps & BaseProps<WarpAlert> & BaseEvents>;
|
|
994
|
-
|
|
995
|
-
|
|
996
996
|
/**
|
|
997
997
|
* `w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.
|
|
998
998
|
*
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var v=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var i=(a,e,n,r)=>{for(var o=r>1?void 0:r?h(e,n):e,l=a.length-1,c;l>=0;l--)(c=a[l])&&(o=(r?c(e,n,o):c(o))||o);return r&&o&&v(e,n,o),o};import{html as m,
|
|
1
|
+
var v=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var i=(a,e,n,r)=>{for(var o=r>1?void 0:r?h(e,n):e,l=a.length-1,c;l>=0;l--)(c=a[l])&&(o=(r?c(e,n,o):c(o))||o);return r&&o&&v(e,n,o),o};import{html as m,css as w,LitElement as f,nothing as x}from"lit";var s=function(){for(var a=[],e=arguments.length;e--;)a[e]=arguments[e];return a.reduce(function(n,r){return n.concat(typeof r=="string"?r:Array.isArray(r)?s.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(o){return r[o]?o:""}):"")},[]).join(" ")};import{property as d}from"lit/decorators.js";import{css as b}from"lit";var p=b`
|
|
2
2
|
*,
|
|
3
3
|
:before,
|
|
4
4
|
:after {
|
|
@@ -271,7 +271,7 @@ var v=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var i=(a,e,n,r
|
|
|
271
271
|
svg {
|
|
272
272
|
pointer-events: none;
|
|
273
273
|
}
|
|
274
|
-
`,
|
|
274
|
+
`,Y=b`*, :before, :after {
|
|
275
275
|
--w-rotate: 0;
|
|
276
276
|
--w-rotate-x: 0;
|
|
277
277
|
--w-rotate-y: 0;
|
|
@@ -2437,9 +2437,16 @@ var v=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var i=(a,e,n,r
|
|
|
2437
2437
|
display: none
|
|
2438
2438
|
}
|
|
2439
2439
|
}
|
|
2440
|
-
`;import{css as u}from"lit";var g=u`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.border-2{border-width:2px}.rounded-8{border-radius:8px}.rounded-l-0{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-0{border-top-right-radius:0;border-bottom-right-radius:0}.block{display:block}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.s-border{border-color:var(--w-s-color-border)}.s-surface-sunken{background-color:var(--w-s-color-surface-sunken)}.-mx-16{margin-left:-1.6rem;margin-right:-1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.p-16{padding:1.6rem}.break-words{overflow-wrap:break-word}@media (min-width:480px){.sm\\:rounded-8{border-radius:8px}.sm\\:mx-0{margin-left:0;margin-right:0}}`;var t=class extends
|
|
2440
|
+
`;import{css as u}from"lit";var g=u`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.border-2{border-width:2px}.rounded-8{border-radius:8px}.rounded-l-0{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-0{border-top-right-radius:0;border-bottom-right-radius:0}.block{display:block}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-info-subtle{background-color:var(--w-s-color-background-info-subtle)}.s-border{border-color:var(--w-s-color-border)}.s-surface-sunken{background-color:var(--w-s-color-surface-sunken)}.-mx-16{margin-left:-1.6rem;margin-right:-1.6rem}.last-child\\:mb-0>:last-child{margin-bottom:0}.p-16{padding:1.6rem}.break-words{overflow-wrap:break-word}@media (min-width:480px){.sm\\:rounded-8{border-radius:8px}.sm\\:mx-0{margin-left:0;margin-right:0}}`;var t=class extends f{get _class(){return s(["group block relative break-words last-child:mb-0 p-16 rounded-8",this.bleed&&"-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",this.info&&"s-bg-info-subtle",this.neutral&&"s-surface-sunken",this.bordered&&"border-2 s-border s-bg"])}get _optOutRoleWithDefault(){var e;return this.role===""?x:(e=this.role)!=null?e:"region"}render(){return m`
|
|
2441
2441
|
<div role="${this._optOutRoleWithDefault}" class="${this._class}">
|
|
2442
2442
|
<slot></slot>
|
|
2443
2443
|
</div>
|
|
2444
|
-
`}};t.styles=[p,g
|
|
2444
|
+
`}};t.styles=[p,g,w`
|
|
2445
|
+
:host {
|
|
2446
|
+
display: block;
|
|
2447
|
+
}
|
|
2448
|
+
::slotted(:last-child) {
|
|
2449
|
+
margin-bottom: 0px !important;
|
|
2450
|
+
}
|
|
2451
|
+
`],i([d({type:Boolean,reflect:!0})],t.prototype,"bleed",2),i([d({type:Boolean,reflect:!0})],t.prototype,"bordered",2),i([d({type:Boolean,reflect:!0})],t.prototype,"info",2),i([d({type:Boolean,reflect:!0})],t.prototype,"neutral",2),i([d({type:String,reflect:!0})],t.prototype,"role",2);customElements.get("w-box")||customElements.define("w-box",t);export{t as WarpBox};
|
|
2445
2452
|
//# sourceMappingURL=index.js.map
|