@pantoken/components 0.6.0 → 0.7.1
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/README.md +7 -3
- package/dist/avatar.css +1 -1
- package/dist/badge.css +1 -1
- package/dist/breadcrumb.css +1 -1
- package/dist/breadcrumb.link.css +1 -0
- package/dist/byline.css +1 -1
- package/dist/calendar.css +1 -1
- package/dist/calendar.day.css +1 -0
- package/dist/checkbox.css +1 -1
- package/dist/component-icons.css +1 -1
- package/dist/components.css +1 -1
- package/dist/context-view.css +1 -1
- package/dist/drawer-layout.content.css +1 -0
- package/dist/drawer-layout.css +1 -0
- package/dist/drawer-layout.tray.css +1 -0
- package/dist/index.d.mts +193 -75
- package/dist/index.mjs +1202 -381
- package/dist/list.css +1 -1
- package/dist/list.item.css +1 -0
- package/dist/mask.css +1 -0
- package/dist/menu.css +1 -1
- package/dist/menu.group.css +1 -0
- package/dist/menu.item.css +1 -0
- package/dist/menu.separator.css +1 -0
- package/dist/metric.css +1 -1
- package/dist/modal.body.css +1 -0
- package/dist/modal.css +1 -1
- package/dist/modal.footer.css +1 -0
- package/dist/modal.header.css +1 -0
- package/dist/pagination.css +1 -1
- package/dist/pagination.page.css +1 -0
- package/dist/progress-circle.css +1 -1
- package/dist/prose.css +1 -1
- package/dist/side-nav-bar.css +1 -1
- package/dist/side-nav-bar.item.css +1 -0
- package/dist/spinner.css +1 -1
- package/dist/table.body.css +1 -0
- package/dist/table.cell.css +1 -0
- package/dist/table.col-header.css +1 -0
- package/dist/table.css +1 -1
- package/dist/table.head.css +1 -0
- package/dist/table.row-header.css +1 -0
- package/dist/table.row.css +1 -0
- package/dist/tabs.css +1 -1
- package/dist/tabs.panel.css +1 -0
- package/dist/tabs.tab.css +1 -0
- package/dist/text.css +1 -1
- package/dist/tooltip.css +1 -1
- package/dist/tray.css +1 -1
- package/dist/utilities/cursor.css +1 -0
- package/dist/utilities/gap.css +1 -0
- package/dist/utilities/icon.css +1 -0
- package/dist/utilities/layout.css +1 -0
- package/dist/utilities/mask.css +1 -0
- package/dist/utilities/overflow.css +1 -0
- package/dist/utilities/position.css +1 -0
- package/dist/utilities/responsive.css +1 -0
- package/dist/utilities/screen-reader-content.css +1 -0
- package/dist/utilities/spacing.css +1 -0
- package/dist/utilities/stacking.css +1 -0
- package/dist/utilities/transition.css +1 -0
- package/dist/utilities.css +1 -1
- package/dist/view.css +1 -0
- package/package.json +19 -8
- package/dist/truncate.css +0 -1
package/README.md
CHANGED
|
@@ -79,12 +79,16 @@ namespace every class.
|
|
|
79
79
|
- **`buttonCss` / `alertCss` / `badgeCss` (options?)** — one component's stylesheet.
|
|
80
80
|
- **`baseCss(): string`** — the global reset plus the focus-outline ring.
|
|
81
81
|
- **`proseCss(options?): string`** — the prose/content stylesheet. `options.scope` sets the
|
|
82
|
-
content-root selector (default `"
|
|
82
|
+
content-root selector (default `":where(body)"`, applied automatically like `baseCss()` — no wrapper
|
|
83
|
+
class required unless you pass a different `scope`, e.g. `".vp-doc"`).
|
|
83
84
|
- **`elevationCss(options?)`, `focusOutlineCss(options?)`** — the shadow scale and focus ring, exposed
|
|
84
85
|
for renderers that compose their own sheets (`@pantoken/pendo` does this).
|
|
85
86
|
- **`viewCss`, `spacingUtilitiesCss`, `layoutUtilitiesCss`, `responsiveUtilitiesCss` (options?)** — the
|
|
86
|
-
utility builders. `responsiveUtilitiesCss` emits viewport `.<prefix>-hidden-{max,min}
|
|
87
|
-
|
|
87
|
+
utility builders. `responsiveUtilitiesCss` emits viewport `.<prefix>-hidden-{max,min}-<bp>` classes
|
|
88
|
+
at the `--instui-component-tray-width-*` scale (`xs`/`sm`/`md`/`lg`/`xl`, each also aliased to a
|
|
89
|
+
long-form spelling — `x-small`…`x-large` — and a device name — `mobile`/`phablet`/`tablet`/`laptop`/
|
|
90
|
+
`desktop`), plus the unscaled, themed `content`/`content-full-width` tiers (the main content area's
|
|
91
|
+
max-width) — and a `.<prefix>-container` marker with `@container` `.<prefix>-cq-hidden-{max,min}-*`
|
|
88
92
|
variants (component-width responsiveness). The generic token→class emitters (`colorUtilitiesCss`,
|
|
89
93
|
`tokenUtilitiesCss`) come from `@pantoken/utils`.
|
|
90
94
|
- **`ComponentOptions`, `ProseOptions`** — the option types.
|
package/dist/avatar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.instui-avatar{width:var(--instui-component-avatar-size-md);height:var(--instui-component-avatar-size-md);white-space:nowrap;background:var(--instui-component-avatar-background-color);color:var(--instui-component-avatar-blue-text-color);border:var(--instui-component-avatar-border-width-sm) solid transparent;font-family:var(--instui-component-avatar-font-family);font-size:var(--instui-component-avatar-font-size-md);font-weight:var(--instui-component-avatar-font-weight);border-radius:50%;justify-content:center;align-items:center;display:inline-flex;overflow:hidden
|
|
1
|
+
@scope(.instui-avatar){:scope{width:var(--instui-component-avatar-size-md);height:var(--instui-component-avatar-size-md);white-space:nowrap;background:var(--instui-component-avatar-background-color);color:var(--instui-component-avatar-blue-text-color);border:var(--instui-component-avatar-border-width-sm) solid transparent;font-family:var(--instui-component-avatar-font-family);font-size:var(--instui-component-avatar-font-size-md);font-weight:var(--instui-component-avatar-font-weight);border-radius:50%;justify-content:center;align-items:center;display:inline-flex;overflow:hidden;&.-shape-rectangle{border-radius:var(--instui-component-avatar-rectangle-radius)}&:not(:has(>img)){border-color:var(--instui-component-avatar-border-color)}&[data-initials]{font-size:0;&:before{content:attr(data-initials);font-size:var(--instui-component-avatar-font-size-md)}}&>img{object-fit:cover;border-radius:50%;block-size:100%;inline-size:100%}&.-shape-rectangle>img{border-radius:var(--instui-component-avatar-rectangle-radius)}&:not(:has([class*=-name])) .name,&:not(:has(.name)) .first-name,&:not(:has(.name)) .last-name{white-space:nowrap;vertical-align:middle;max-width:1ch;display:inline-block;overflow:hidden}}}.instui-avatar.-size-sm{width:var(--instui-component-avatar-size-sm);height:var(--instui-component-avatar-size-sm);font-size:var(--instui-component-avatar-font-size-sm)}.instui-avatar.-size-2xs{width:var(--instui-component-avatar-size2xs);height:var(--instui-component-avatar-size2xs);font-size:var(--instui-component-avatar-font-size2xs)}.instui-avatar.-size-xs{width:var(--instui-component-avatar-size-xs);height:var(--instui-component-avatar-size-xs);font-size:var(--instui-component-avatar-font-size-xs)}.instui-avatar.-size-lg{width:var(--instui-component-avatar-size-lg);height:var(--instui-component-avatar-size-lg);font-size:var(--instui-component-avatar-font-size-lg)}.instui-avatar.-size-xl{width:var(--instui-component-avatar-size-xl);height:var(--instui-component-avatar-size-xl);font-size:var(--instui-component-avatar-font-size-xl)}.instui-avatar.-size-2xl{width:var(--instui-component-avatar-size2xl);height:var(--instui-component-avatar-size2xl);font-size:var(--instui-component-avatar-font-size2xl)}.instui-avatar.-size-md{width:var(--instui-component-avatar-size-md);height:var(--instui-component-avatar-size-md);font-size:var(--instui-component-avatar-font-size-md)}.instui-avatar.-size-2xs[data-initials]:before{font-size:var(--instui-component-avatar-font-size2xs)}.instui-avatar.-size-xs[data-initials]:before{font-size:var(--instui-component-avatar-font-size-xs)}.instui-avatar.-size-sm[data-initials]:before{font-size:var(--instui-component-avatar-font-size-sm)}.instui-avatar.-size-lg[data-initials]:before{font-size:var(--instui-component-avatar-font-size-lg)}.instui-avatar.-size-xl[data-initials]:before{font-size:var(--instui-component-avatar-font-size-xl)}.instui-avatar.-size-2xl[data-initials]:before{font-size:var(--instui-component-avatar-font-size2xl)}.instui-avatar.-color-ash{color:var(--instui-component-avatar-ash-text-color)}.instui-avatar.-color-ash.-has-inverse-color{background:var(--instui-component-avatar-ash-background-color)}.instui-avatar.-color-blue{color:var(--instui-component-avatar-blue-text-color)}.instui-avatar.-color-blue.-has-inverse-color{background:var(--instui-component-avatar-blue-background-color)}.instui-avatar.-color-green{color:var(--instui-component-avatar-green-text-color)}.instui-avatar.-color-green.-has-inverse-color{background:var(--instui-component-avatar-green-background-color)}.instui-avatar.-color-grey{color:var(--instui-component-avatar-grey-text-color)}.instui-avatar.-color-grey.-has-inverse-color{background:var(--instui-component-avatar-grey-background-color)}.instui-avatar.-color-orange{color:var(--instui-component-avatar-orange-text-color)}.instui-avatar.-color-orange.-has-inverse-color{background:var(--instui-component-avatar-orange-background-color)}.instui-avatar.-color-red{color:var(--instui-component-avatar-red-text-color)}.instui-avatar.-color-red.-has-inverse-color{background:var(--instui-component-avatar-red-background-color)}.instui-avatar.-color-ai{background:linear-gradient(to bottom, var(--instui-component-avatar-ai-top-gradient-color), var(--instui-component-avatar-ai-bottom-gradient-color));color:var(--instui-component-avatar-text-on-color);border-color:#0000}.instui-avatar.-has-inverse-color{background:var(--instui-component-avatar-blue-background-color);color:var(--instui-component-avatar-text-on-color);border-color:#0000}.instui-avatar.-show-border-always{border-width:var(--instui-component-avatar-border-width-md);border-style:solid;border-color:var(--instui-component-avatar-border-color)}.instui-avatar.-show-border-never{border-color:#0000}.instui-avatar.-size-small{width:var(--instui-component-avatar-size-sm);height:var(--instui-component-avatar-size-sm);font-size:var(--instui-component-avatar-font-size-sm)}.instui-avatar.-size-xx-small{width:var(--instui-component-avatar-size2xs);height:var(--instui-component-avatar-size2xs);font-size:var(--instui-component-avatar-font-size2xs)}.instui-avatar.-size-x-small{width:var(--instui-component-avatar-size-xs);height:var(--instui-component-avatar-size-xs);font-size:var(--instui-component-avatar-font-size-xs)}.instui-avatar.-size-large{width:var(--instui-component-avatar-size-lg);height:var(--instui-component-avatar-size-lg);font-size:var(--instui-component-avatar-font-size-lg)}.instui-avatar.-size-x-large{width:var(--instui-component-avatar-size-xl);height:var(--instui-component-avatar-size-xl);font-size:var(--instui-component-avatar-font-size-xl)}.instui-avatar.-size-xx-large{width:var(--instui-component-avatar-size2xl);height:var(--instui-component-avatar-size2xl);font-size:var(--instui-component-avatar-font-size2xl)}.instui-avatar.-size-medium{width:var(--instui-component-avatar-size-md);height:var(--instui-component-avatar-size-md);font-size:var(--instui-component-avatar-font-size-md)}.instui-avatar.-size-xx-small[data-initials]:before{font-size:var(--instui-component-avatar-font-size2xs)}.instui-avatar.-size-x-small[data-initials]:before{font-size:var(--instui-component-avatar-font-size-xs)}.instui-avatar.-size-small[data-initials]:before{font-size:var(--instui-component-avatar-font-size-sm)}.instui-avatar.-size-large[data-initials]:before{font-size:var(--instui-component-avatar-font-size-lg)}.instui-avatar.-size-x-large[data-initials]:before{font-size:var(--instui-component-avatar-font-size-xl)}.instui-avatar.-size-xx-large[data-initials]:before{font-size:var(--instui-component-avatar-font-size2xl)}.instui-avatar.-color-accent1{color:var(--instui-component-avatar-blue-text-color)}.instui-avatar.-color-accent1.-has-inverse-color{background:var(--instui-component-avatar-blue-background-color)}.instui-avatar.-color-accent2{color:var(--instui-component-avatar-green-text-color)}.instui-avatar.-color-accent2.-has-inverse-color{background:var(--instui-component-avatar-green-background-color)}.instui-avatar.-color-accent3{color:var(--instui-component-avatar-red-text-color)}.instui-avatar.-color-accent3.-has-inverse-color{background:var(--instui-component-avatar-red-background-color)}.instui-avatar.-color-accent4{color:var(--instui-component-avatar-orange-text-color)}.instui-avatar.-color-accent4.-has-inverse-color{background:var(--instui-component-avatar-orange-background-color)}.instui-avatar.-color-accent5{color:var(--instui-component-avatar-ash-text-color)}.instui-avatar.-color-accent5.-has-inverse-color{background:var(--instui-component-avatar-ash-background-color)}.instui-avatar.-color-accent6{color:var(--instui-component-avatar-grey-text-color)}.instui-avatar.-color-accent6.-has-inverse-color{background:var(--instui-component-avatar-grey-background-color)}.instui-avatar.-show-border{border-width:var(--instui-component-avatar-border-width-md);border-style:solid;border-color:var(--instui-component-avatar-border-color)}
|
package/dist/badge.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes pantoken-badge-pulse{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}.instui-badge-wrapper{display:inline-flex;position:relative}.instui-badge{--pantoken-badge-accent:var(--instui-component-badge-color-primary);--pantoken-badge-text:light-dark(var(--instui-component-badge-color),var(--instui-component-badge-color-inverse));min-width:var(--instui-component-badge-size);height:var(--instui-component-badge-size);padding:0 var(--instui-component-badge-padding);font-family:var(--instui-component-badge-font-family);font-size:var(--instui-component-badge-font-size);font-weight:var(--instui-component-badge-font-weight);border-radius:var(--instui-component-badge-border-radius);background:var(--pantoken-badge-accent);color:var(--pantoken-badge-text);justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative
|
|
1
|
+
@keyframes pantoken-badge-pulse{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}.instui-badge-wrapper{display:inline-flex;position:relative}@scope(.instui-badge){:scope{--pantoken-badge-accent:var(--instui-component-badge-color-primary);--pantoken-badge-text:light-dark(var(--instui-component-badge-color),var(--instui-component-badge-color-inverse));min-width:var(--instui-component-badge-size);height:var(--instui-component-badge-size);padding:0 var(--instui-component-badge-padding);font-family:var(--instui-component-badge-font-family);font-size:var(--instui-component-badge-font-size);font-weight:var(--instui-component-badge-font-weight);border-radius:var(--instui-component-badge-border-radius);background:var(--pantoken-badge-accent);color:var(--pantoken-badge-text);justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative;&.-color-success{--pantoken-badge-accent:var(--instui-component-badge-color-success);--pantoken-badge-text:var(--instui-component-badge-color)}&.-color-danger{--pantoken-badge-accent:var(--instui-component-badge-color-danger);--pantoken-badge-text:var(--instui-component-badge-color)}&.-color-inverse{--pantoken-badge-accent:var(--instui-component-badge-color);--pantoken-badge-text:var(--instui-component-badge-color-inverse)}&.-type-notification{min-width:0;width:var(--instui-spacing-space-sm);height:var(--instui-spacing-space-sm);padding:0;font-size:0}&.-pulse:before{content:"";border:var(--instui-border-width-md) solid var(--pantoken-badge-accent);border-radius:inherit;animation:1.2s ease-out infinite pantoken-badge-pulse;position:absolute;inset:0}&.-placement-top-end,&.-placement-top-start,&.-placement-bottom-end,&.-placement-bottom-start,&.-placement-start-center,&.-placement-end-center{position:absolute}&.-placement-top-end{top:-.5rem;inset-inline-end:-.5rem}&.-placement-top-start{top:-.5rem;inset-inline-start:-.5rem}&.-placement-bottom-end{bottom:-.5rem;inset-inline-end:-.5rem}&.-placement-bottom-start{bottom:-.5rem;inset-inline-start:-.5rem}&.-placement-end-center{top:50%;inset-inline-end:-.5rem;transform:translateY(-50%)}&.-placement-start-center{top:50%;inset-inline-start:-.5rem;transform:translateY(-50%)}&.-standalone{position:relative;inset:auto;transform:none}}}
|
package/dist/breadcrumb.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.instui-breadcrumb{align-items:center;gap:var(--instui-component-breadcrumb-gap-md);font-family:var(--instui-component-link-font-family);font-size:var(--instui-component-link-font-size-md);flex-wrap:wrap;display:flex}.instui-breadcrumb.-size-sm{gap:var(--instui-component-breadcrumb-gap-sm);font-size:var(--instui-component-link-font-size-sm)}.instui-breadcrumb.-size-
|
|
1
|
+
.instui-breadcrumb{display:block}.instui-breadcrumb:not(:has(>ol>li>a)){display:none}.instui-breadcrumb>ol{align-items:center;gap:var(--instui-component-breadcrumb-gap-md);font-family:var(--instui-component-link-font-family);font-size:var(--instui-component-link-font-size-md);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.instui-breadcrumb.-size-sm>ol{gap:var(--instui-component-breadcrumb-gap-sm);font-size:var(--instui-component-link-font-size-sm)}.instui-breadcrumb.-size-md>ol{gap:var(--instui-component-breadcrumb-gap-md);font-size:var(--instui-component-link-font-size-md)}.instui-breadcrumb.-size-lg>ol{gap:var(--instui-component-breadcrumb-gap-lg);font-size:var(--instui-component-link-font-size-lg)}.instui-breadcrumb.-size-small>ol{gap:var(--instui-component-breadcrumb-gap-sm);font-size:var(--instui-component-link-font-size-sm)}.instui-breadcrumb.-size-medium>ol{gap:var(--instui-component-breadcrumb-gap-md);font-size:var(--instui-component-link-font-size-md)}.instui-breadcrumb.-size-large>ol{gap:var(--instui-component-breadcrumb-gap-lg);font-size:var(--instui-component-link-font-size-lg)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@scope(.instui-breadcrumb){:scope.-size-sm li:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-sm)}:scope.-size-md li:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-md)}:scope.-size-lg li:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-lg)}:scope>ol>li{margin:0}:scope a{color:var(--instui-component-link-text-color);text-decoration:none}:scope a[class*=-icon-]:before{margin-inline-end:var(--instui-spacing-space2xs)}:scope a:hover{color:var(--instui-component-link-text-hover-color);text-decoration:underline}:scope li:not(:last-child){color:var(--instui-color-text-muted)}:scope li:not(:last-child):after{content:"";vertical-align:-.125em;block-size:1em;inline-size:1em;-webkit-mask:var(--instui-icon-chevron-right) center / contain no-repeat;mask:var(--instui-icon-chevron-right) center / contain no-repeat;background:currentColor;margin-inline-start:var(--instui-component-breadcrumb-gap-md);display:inline-block}[dir=rtl] :scope li:not(:last-child):after{-webkit-mask:var(--instui-icon-chevron-left) center / contain no-repeat;mask:var(--instui-icon-chevron-left) center / contain no-repeat}@media (width<=47.9375em){:scope>ol:has(>li:nth-last-child(2))>li:not(:nth-last-child(2)),:scope li:not(:last-child):after{display:none}:scope li:nth-last-child(2):before{content:"";vertical-align:-.125em;block-size:1em;inline-size:1em;-webkit-mask:var(--instui-icon-chevron-left) center / contain no-repeat;mask:var(--instui-icon-chevron-left) center / contain no-repeat;background:currentColor;margin-inline-end:var(--instui-component-breadcrumb-gap-md);display:inline-block}[dir=rtl] :scope>li:nth-last-child(2)>a:before{-webkit-mask:var(--instui-icon-chevron-right) center / contain no-repeat;mask:var(--instui-icon-chevron-right) center / contain no-repeat}}}:scope.-size-small li:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-sm)}:scope.-size-medium li:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-md)}:scope.-size-large li:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-lg)}
|
package/dist/byline.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.instui-byline{align-items:center;gap:var(--instui-component-byline-figure-margin);background:var(--instui-component-byline-background);color:var(--instui-component-byline-color);font-family:var(--instui-component-byline-font-family);display:flex
|
|
1
|
+
@scope(.instui-byline){:scope{align-items:center;gap:var(--instui-component-byline-figure-margin);background:var(--instui-component-byline-background);color:var(--instui-component-byline-color);font-family:var(--instui-component-byline-font-family);display:flex;&.-align-content-top{align-items:flex-start}&.-align-content-center{align-items:center}}}.instui-byline.-size-sm{max-width:var(--instui-component-byline-small,20rem)}.instui-byline.-size-md{max-width:var(--instui-component-byline-medium,30rem)}.instui-byline.-size-lg{max-width:var(--instui-component-byline-large,40rem)}@scope(.instui-byline){:scope{&>[class*=-icon-]{line-height:1}& .title{margin:0 0 var(--instui-component-byline-title-margin);font-size:var(--instui-component-byline-title-font-size);font-weight:var(--instui-component-byline-title-font-weight);line-height:var(--instui-component-byline-title-line-height)}& .description{font-size:var(--instui-component-byline-description-font-size);font-weight:var(--instui-component-byline-description-font-weight);line-height:var(--instui-component-byline-description-line-height)}}}.instui-byline.-size-small{max-width:var(--instui-component-byline-small,20rem)}.instui-byline.-size-medium{max-width:var(--instui-component-byline-medium,30rem)}.instui-byline.-size-large{max-width:var(--instui-component-byline-large,40rem)}
|
package/dist/calendar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.instui-calendar{text-align:center;background:var(--instui-component-calendar-background);color:var(--instui-component-calendar-color);font-family:var(--instui-component-calendar-font-family);font-size:var(--instui-component-calendar-font-size);font-weight:var(--instui-component-calendar-font-weight);line-height:var(--instui-component-calendar-line-height);display:inline-block}@scope(.instui-calendar){:scope>.nav{justify-content:space-between;align-items:center;margin-block-end:var(--instui-component-calendar-nav-margin);display:flex}:scope>.grid{grid-template-columns:repeat(7, var(--instui-component-calendar-day-min-width));justify-content:center;gap:var(--instui-spacing-space2xs);display:grid}.weekday
|
|
1
|
+
.instui-calendar{text-align:center;background:var(--instui-component-calendar-background);color:var(--instui-component-calendar-color);font-family:var(--instui-component-calendar-font-family);font-size:var(--instui-component-calendar-font-size);font-weight:var(--instui-component-calendar-font-weight);line-height:var(--instui-component-calendar-line-height);display:inline-block}@scope(.instui-calendar){:scope>.nav{justify-content:space-between;align-items:center;margin-block-end:var(--instui-component-calendar-nav-margin);display:flex}:scope>.grid{grid-template-columns:repeat(7, var(--instui-component-calendar-day-min-width));justify-content:center;gap:var(--instui-spacing-space2xs);display:grid}.weekday{inline-size:var(--instui-component-calendar-day-min-width);block-size:var(--instui-component-calendar-day-height);font-weight:var(--instui-font-weight-interactive);justify-content:center;align-items:center;display:flex}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@scope(.instui-calendar){.day{inline-size:var(--instui-component-calendar-day-min-width);block-size:var(--instui-component-calendar-day-height);font-size:var(--instui-component-calendar-day-font-size);color:var(--instui-component-calendar-day-color);background:var(--instui-component-calendar-day-background);cursor:pointer;justify-content:center;align-items:center;display:flex}.day.-outside-month{color:var(--instui-component-calendar-day-outside-month-color)}.day.-today{background:var(--instui-component-calendar-day-today-background);color:var(--instui-component-calendar-day-today-color);border-radius:var(--instui-component-calendar-day-today-border-radius)}.day.-selected{background:var(--instui-component-calendar-day-selected-background);color:var(--instui-component-calendar-day-selected-color);border-radius:var(--instui-component-calendar-day-selected-border-radius)}}
|
package/dist/checkbox.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.instui-checkbox{align-items:center;gap:var(--instui-component-checkbox-gap);color:var(--instui-component-checkbox-label-base-color);font-family:var(--instui-component-checkbox-font-family);font-size:var(--instui-component-checkbox-font-size-md);font-weight:var(--instui-component-checkbox-font-weight);line-height:var(--instui-component-checkbox-line-height);display:inline-flex}.instui-checkbox.-label-placement-end{flex-direction:row}.instui-checkbox.-label-placement-start{flex-direction:row-reverse}.instui-checkbox.-label-placement-top{flex-direction:column-reverse;align-items:flex-start}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]{-webkit-appearance:none;appearance:none;width:var(--instui-component-checkbox-control-size-md);height:var(--instui-component-checkbox-control-size-md);margin-block:var(--instui-component-checkbox-control-vertical-margin);border:var(--instui-component-checkbox-border-width) solid var(--instui-component-checkbox-border-color);border-radius:var(--instui-component-checkbox-border-radius);background:var(--instui-component-checkbox-background-color);cursor:pointer
|
|
1
|
+
.instui-checkbox{align-items:center;gap:var(--instui-component-checkbox-gap);color:var(--instui-component-checkbox-label-base-color);font-family:var(--instui-component-checkbox-font-family);font-size:var(--instui-component-checkbox-font-size-md);font-weight:var(--instui-component-checkbox-font-weight);line-height:var(--instui-component-checkbox-line-height);display:inline-flex}.instui-checkbox.-label-placement-end{flex-direction:row}.instui-checkbox.-label-placement-start{flex-direction:row-reverse}.instui-checkbox.-label-placement-top{flex-direction:column-reverse;align-items:flex-start}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]{--pantoken-cb-glyph:var(--instui-icon-check) center / contain no-repeat;-webkit-appearance:none;appearance:none;width:var(--instui-component-checkbox-control-size-md);height:var(--instui-component-checkbox-control-size-md);margin-block:var(--instui-component-checkbox-control-vertical-margin);border:var(--instui-component-checkbox-border-width) solid var(--instui-component-checkbox-border-color);border-radius:var(--instui-component-checkbox-border-radius);background:var(--instui-component-checkbox-background-color);cursor:pointer;flex:none;place-content:center;transition:background-color .15s,border-color .15s;display:inline-grid}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:before{content:"";background:oklch(from var(--instui-component-checkbox-background-checked-color) clamp(0, (.62 - l) * infinity, 1) 0 0);width:.75em;height:.75em;-webkit-mask:var(--pantoken-cb-glyph);mask:var(--pantoken-cb-glyph);transition:transform .1s;transform:scale(0)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:hover{border-color:var(--instui-component-checkbox-border-hover-color);background:var(--instui-component-checkbox-background-hover-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:checked,.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:indeterminate{border-color:var(--instui-component-checkbox-border-checked-color);background:var(--instui-component-checkbox-background-checked-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:checked:before,.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:indeterminate:before{transform:scale(1)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:indeterminate{--pantoken-cb-glyph:var(--instui-icon-minus) center / contain no-repeat}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:disabled{border-color:var(--instui-component-checkbox-border-disabled-color);background:var(--instui-component-checkbox-background-disabled-color);cursor:not-allowed}.instui-checkbox:has(input:disabled){color:var(--instui-component-checkbox-label-disabled-color)}.instui-checkbox:hover{color:var(--instui-component-checkbox-label-hover-color)}.instui-checkbox.-size-sm{font-size:var(--instui-component-checkbox-font-size-sm)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-sm input[type=checkbox]{width:var(--instui-component-checkbox-control-size-sm);height:var(--instui-component-checkbox-control-size-sm)}.instui-checkbox.-size-lg{font-size:var(--instui-component-checkbox-font-size-lg)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-lg input[type=checkbox]{width:var(--instui-component-checkbox-control-size-lg);height:var(--instui-component-checkbox-control-size-lg)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-invalid input[type=checkbox]{border-color:var(--instui-component-checkbox-error-border-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-invalid input[type=checkbox]:hover{border-color:var(--instui-component-checkbox-error-border-hover-color)}.instui-checkbox.-readonly{color:var(--instui-component-checkbox-label-readonly-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-readonly input[type=checkbox]{border-color:var(--instui-component-checkbox-border-readonly-color);background:var(--instui-component-checkbox-background-readonly-color)}@scope(.instui-checkbox){:scope.-required .asterisk{color:var(--instui-component-checkbox-asterisk-color)}}.instui-checkbox.-variant-toggle input[type=checkbox]{--pantoken-toggle-h:var(--instui-size-choice-control-height-md);--pantoken-toggle-w:var(--instui-component-radio-input-toggle-medium-height);--pantoken-toggle-bw:var(--instui-border-width-sm);--pantoken-toggle-inset:calc(var(--pantoken-toggle-bw) * 3);--pantoken-toggle-handle:calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);-webkit-appearance:none;appearance:none;width:var(--pantoken-toggle-w);height:var(--pantoken-toggle-h);border-radius:var(--pantoken-toggle-h);box-shadow:inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);background:var(--instui-color-background-muted);cursor:pointer;border:0;transition:background-color .15s;position:relative}.instui-checkbox.-variant-toggle input[type=checkbox]:before{content:"";box-sizing:border-box;width:var(--pantoken-toggle-handle);height:var(--pantoken-toggle-handle);border:var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);background:var(--instui-component-radio-input-toggle-handle-text);top:50%;border-radius:50%;transition:inset-inline-start .15s;position:absolute;inset-inline-start:var(--pantoken-toggle-inset);transform:translateY(-50%)}.instui-checkbox.-variant-toggle input[type=checkbox]:after{content:"";width:var(--pantoken-toggle-handle);height:var(--pantoken-toggle-handle);background:var(--instui-color-text-muted);-webkit-mask:var(--instui-icon-x) center / 58% no-repeat;mask:var(--instui-icon-x) center / 58% no-repeat;top:50%;transition:inset-inline-start .15s;position:absolute;inset-inline-start:var(--pantoken-toggle-inset);transform:translateY(-50%)}.instui-checkbox.-variant-toggle input[type=checkbox]:checked{background:var(--instui-component-radio-input-toggle-background-success)}.instui-checkbox.-variant-toggle input[type=checkbox]:checked:before{border-color:var(--instui-component-radio-input-toggle-background-success);inset-inline-start:calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset))}.instui-checkbox.-variant-toggle input[type=checkbox]:checked:after{background:var(--instui-component-radio-input-toggle-background-success);-webkit-mask:var(--instui-icon-check) center / 58% no-repeat;mask:var(--instui-icon-check) center / 58% no-repeat;inset-inline-start:calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset))}.instui-checkbox.-size-small{font-size:var(--instui-component-checkbox-font-size-sm)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-small input[type=checkbox]{width:var(--instui-component-checkbox-control-size-sm);height:var(--instui-component-checkbox-control-size-sm)}.instui-checkbox.-size-large{font-size:var(--instui-component-checkbox-font-size-lg)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-large input[type=checkbox]{width:var(--instui-component-checkbox-control-size-lg);height:var(--instui-component-checkbox-control-size-lg)}
|
package/dist/component-icons.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--instui-icon-check:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E);--instui-icon-chevron-down:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E);--instui-icon-chevron-right:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E);--instui-icon-chevron-up:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m18%2015-6-6-6%206%22%2F%3E%3C%2Fsvg%3E);--instui-icon-circle-alert:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%228%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212.01%22%20y1%3D%2216%22%20y2%3D%2216%22%2F%3E%3C%2Fsvg%3E);--instui-icon-circle-check:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E);--instui-icon-circle-x:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206%22%2F%3E%3C%2Fsvg%3E);--instui-icon-info:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E);--instui-icon-minus:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E);--instui-icon-triangle-alert:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E);--instui-icon-x:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E)}
|
|
1
|
+
:root{--instui-icon-check:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E);--instui-icon-chevron-down:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E);--instui-icon-chevron-left:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3C%2Fsvg%3E);--instui-icon-chevron-right:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E);--instui-icon-chevron-up:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m18%2015-6-6-6%206%22%2F%3E%3C%2Fsvg%3E);--instui-icon-circle-alert:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%228%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212.01%22%20y1%3D%2216%22%20y2%3D%2216%22%2F%3E%3C%2Fsvg%3E);--instui-icon-circle-check:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E);--instui-icon-circle-x:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206%22%2F%3E%3C%2Fsvg%3E);--instui-icon-info:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E);--instui-icon-minus:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E);--instui-icon-triangle-alert:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E);--instui-icon-x:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E)}
|