@pantoken/components 1.0.0 → 1.0.1

package/dist/context-view.css

@@ -1 +1 @@
-.instui-context-view{padding:var(--instui-spacing-space-md);background:var(--instui-color-background-elevated-surface-base);color:var(--instui-color-text-base);border:var(--instui-component-context-view-arrow-border-width) solid var(--instui-component-context-view-arrow-border-color);border-radius:var(--instui-component-context-view-border-radius);box-shadow:var(--instui-elevation-above);display:inline-block;position:relative}.instui-context-view:before,.instui-context-view:after{content:"";border-style:solid;border-color:#0000;position:absolute}.instui-context-view:before{border-top-color:var(--instui-component-context-view-arrow-border-color);border-width:calc(var(--instui-component-context-view-arrow-size) + var(--instui-component-context-view-arrow-border-width));top:100%;inset-inline-start:calc(var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width))}.instui-context-view:after{border-width:var(--instui-component-context-view-arrow-size);border-top-color:var(--instui-component-context-view-arrow-background-color);top:100%;inset-inline-start:var(--instui-spacing-space-lg)}.instui-context-view.-placement-bottom:before{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-border-color);top:auto;bottom:100%}.instui-context-view.-placement-bottom:after{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-background-color);top:auto;bottom:100%}.instui-context-view.-placement-start:before,.instui-context-view.-placement-start:after{top:50%;border-top-color:#0000;inset-inline-start:100%;transform:translateY(-50%)}.instui-context-view.-placement-start:before{border-inline-start-color:var(--instui-component-context-view-arrow-border-color)}.instui-context-view.-placement-start:after{border-inline-start-color:var(--instui-component-context-view-arrow-background-color)}.instui-context-view.-placement-end:before,.instui-context-view.-placement-end:after{top:50%;border-top-color:#0000;inset-inline:auto 100%;transform:translateY(-50%)}.instui-context-view.-placement-end:before{border-inline-end-color:var(--instui-component-context-view-arrow-border-color)}.instui-context-view.-placement-end:after{border-inline-end-color:var(--instui-component-context-view-arrow-background-color)}.instui-context-view.-color-inverse{background:var(--instui-color-background-inverse);color:var(--instui-color-text-inverse);border-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse:before{border-top-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse:after{border-top-color:var(--instui-component-context-view-arrow-background-color-inverse)}.instui-context-view.-color-inverse.-placement-bottom:before{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse.-placement-bottom:after{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-background-color-inverse)}.instui-context-view.-color-inverse.-placement-start:before{border-top-color:#0000;border-inline-start-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse.-placement-start:after{border-top-color:#0000;border-inline-start-color:var(--instui-component-context-view-arrow-background-color-inverse)}.instui-context-view.-color-inverse.-placement-end:before{border-top-color:#0000;border-inline-end-color:var(--instui-component-context-view-arrow-border-color-inverse)}.instui-context-view.-color-inverse.-placement-end:after{border-top-color:#0000;border-inline-end-color:var(--instui-component-context-view-arrow-background-color-inverse)}[popover].instui-context-view{margin:0;position:fixed;overflow:visible}[popover].instui-context-view:not(:popover-open){display:none}@supports (position-area:block-end){[popover].instui-context-view{position-anchor:--pantoken-anchor;position-try-fallbacks:flip-block, flip-inline}[popover].instui-context-view.-placement-top{position-area:block-start}[popover].instui-context-view.-placement-bottom{position-area:block-end}[popover].instui-context-view.-placement-start{position-area:inline-start center}[popover].instui-context-view.-placement-end{position-area:inline-end center}}
+@scope(.instui-context-view){&{padding:var(--instui-spacing-space-md);background:var(--instui-color-background-elevated-surface-base);color:var(--instui-color-text-base);border:var(--instui-component-context-view-arrow-border-width) solid var(--instui-component-context-view-arrow-border-color);border-radius:var(--instui-component-context-view-border-radius);box-shadow:var(--instui-elevation-above);display:inline-block;position:relative}&:before,&:after{content:"";border-style:solid;border-color:#0000;position:absolute}&:before{border-top-color:var(--instui-component-context-view-arrow-border-color);border-width:calc(var(--instui-component-context-view-arrow-size) + var(--instui-component-context-view-arrow-border-width));top:100%;inset-inline-start:calc(var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width))}&:after{border-width:var(--instui-component-context-view-arrow-size);border-top-color:var(--instui-component-context-view-arrow-background-color);top:100%;inset-inline-start:var(--instui-spacing-space-lg)}&.-placement-bottom:before{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-border-color);top:auto;bottom:100%}&.-placement-bottom:after{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-background-color);top:auto;bottom:100%}&.-placement-start:before,&.-placement-start:after{top:50%;border-top-color:#0000;inset-inline-start:100%;transform:translateY(-50%)}&.-placement-start:before{border-inline-start-color:var(--instui-component-context-view-arrow-border-color)}&.-placement-start:after{border-inline-start-color:var(--instui-component-context-view-arrow-background-color)}&.-placement-end:before,&.-placement-end:after{top:50%;border-top-color:#0000;inset-inline:auto 100%;transform:translateY(-50%)}&.-placement-end:before{border-inline-end-color:var(--instui-component-context-view-arrow-border-color)}&.-placement-end:after{border-inline-end-color:var(--instui-component-context-view-arrow-background-color)}&.-color-inverse{background:var(--instui-color-background-inverse);color:var(--instui-color-text-inverse);border-color:var(--instui-component-context-view-arrow-border-color-inverse)}&.-color-inverse:before{border-top-color:var(--instui-component-context-view-arrow-border-color-inverse)}&.-color-inverse:after{border-top-color:var(--instui-component-context-view-arrow-background-color-inverse)}&.-color-inverse.-placement-bottom:before{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-border-color-inverse)}&.-color-inverse.-placement-bottom:after{border-top-color:#0000;border-bottom-color:var(--instui-component-context-view-arrow-background-color-inverse)}&.-color-inverse.-placement-start:before{border-top-color:#0000;border-inline-start-color:var(--instui-component-context-view-arrow-border-color-inverse)}&.-color-inverse.-placement-start:after{border-top-color:#0000;border-inline-start-color:var(--instui-component-context-view-arrow-background-color-inverse)}&.-color-inverse.-placement-end:before{border-top-color:#0000;border-inline-end-color:var(--instui-component-context-view-arrow-border-color-inverse)}&.-color-inverse.-placement-end:after{border-top-color:#0000;border-inline-end-color:var(--instui-component-context-view-arrow-background-color-inverse)}&[popover]{margin:0;position:fixed;overflow:visible}&[popover]:not(:popover-open){display:none}@supports (position-area:block-end){&[popover]{position-anchor:--pantoken-anchor;position-try-fallbacks:flip-block, flip-inline}&[popover].-placement-top{position-area:block-start}&[popover].-placement-bottom{position-area:block-end}&[popover].-placement-start{position-area:inline-start center}&[popover].-placement-end{position-area:inline-end center}}}

package/dist/file-drop.css

@@ -1 +1 @@
-.instui-file-drop{text-align:center;padding:var(--instui-spacing-space-lg);color:var(--instui-color-text-base);background:var(--instui-component-file-drop-background-color);border:var(--instui-component-file-drop-border-width) var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);border-radius:var(--instui-component-file-drop-border-radius);display:block}.instui-file-drop:hover,.instui-file-drop.-hover{border-color:var(--instui-component-file-drop-hover-border-color)}.instui-file-drop.-accepted{border-color:var(--instui-component-file-drop-accepted-color)}.instui-file-drop.-rejected{border-color:var(--instui-component-file-drop-rejected-color)}.instui-file-drop>[class*=-icon-]{line-height:1}
+@scope(.instui-file-drop){&{text-align:center;padding:var(--instui-spacing-space-lg);color:var(--instui-color-text-base);background:var(--instui-component-file-drop-background-color);border:var(--instui-component-file-drop-border-width) var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);border-radius:var(--instui-component-file-drop-border-radius);display:block}&:hover,&.-hover{border-color:var(--instui-component-file-drop-hover-border-color)}&.-accepted{border-color:var(--instui-component-file-drop-accepted-color)}&.-rejected{border-color:var(--instui-component-file-drop-rejected-color)}&>[class*=-icon-]{line-height:1}}

package/dist/form-field-group.css

@@ -1 +1 @@
-.instui-form-field-group{gap:var(--instui-component-form-field-layout-gap-inputs);border:0;grid-template-columns:1fr;min-inline-size:0;margin:0;padding:0;display:grid}.instui-form-field-group>legend{color:var(--instui-component-form-field-layout-text-color);font-family:var(--instui-component-form-field-layout-font-family);font-weight:var(--instui-component-form-field-layout-font-weight);font-size:var(--instui-component-form-field-layout-font-size);line-height:var(--instui-component-form-field-layout-line-height);grid-column:1/-1;margin-block-end:var(--instui-component-form-field-layout-gap-primitives);padding:0}.instui-form-field-group.-required>legend:after{content:"*";color:var(--instui-component-form-field-layout-asterisk-color);margin-inline-start:.25rem}.instui-form-field-group.-layout-columns,.instui-form-field-group.-layout-inline{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}.instui-form-field-group.-row-spacing-none{row-gap:0}.instui-form-field-group.-row-spacing-small{row-gap:var(--instui-spacing-space-sm)}.instui-form-field-group.-row-spacing-medium{row-gap:var(--instui-spacing-space-md)}.instui-form-field-group.-row-spacing-large{row-gap:var(--instui-spacing-space-lg)}.instui-form-field-group.-col-spacing-none{column-gap:0}.instui-form-field-group.-col-spacing-small{column-gap:var(--instui-spacing-space-sm)}.instui-form-field-group.-col-spacing-medium{column-gap:var(--instui-spacing-space-md)}.instui-form-field-group.-col-spacing-large{column-gap:var(--instui-spacing-space-lg)}.instui-form-field-group.-v-align-top{align-items:start}.instui-form-field-group.-v-align-middle{align-items:center}.instui-form-field-group.-v-align-bottom{align-items:end}@supports (grid-template-columns:subgrid){.instui-form-field-group.-layout-aligned{grid-template-columns:auto 1fr;align-items:center}.instui-form-field-group.-layout-aligned>.instui-form-field{grid-column:1/-1;grid-template-columns:subgrid;grid-template-areas:"label controls"".messages";align-items:center;display:grid}}
+@scope(.instui-form-field-group){&{gap:var(--instui-component-form-field-layout-gap-inputs);border:0;grid-template-columns:1fr;min-inline-size:0;margin:0;padding:0;display:grid}&>legend{color:var(--instui-component-form-field-layout-text-color);font-family:var(--instui-component-form-field-layout-font-family);font-weight:var(--instui-component-form-field-layout-font-weight);font-size:var(--instui-component-form-field-layout-font-size);line-height:var(--instui-component-form-field-layout-line-height);grid-column:1/-1;margin-block-end:var(--instui-component-form-field-layout-gap-primitives);padding:0}&.-required>legend:after{content:"*";color:var(--instui-component-form-field-layout-asterisk-color);margin-inline-start:.25rem}&.-layout-columns,&.-layout-inline{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}&.-row-spacing-none{row-gap:0}&.-row-spacing-small{row-gap:var(--instui-spacing-space-sm)}&.-row-spacing-medium{row-gap:var(--instui-spacing-space-md)}&.-row-spacing-large{row-gap:var(--instui-spacing-space-lg)}&.-col-spacing-none{column-gap:0}&.-col-spacing-small{column-gap:var(--instui-spacing-space-sm)}&.-col-spacing-medium{column-gap:var(--instui-spacing-space-md)}&.-col-spacing-large{column-gap:var(--instui-spacing-space-lg)}&.-v-align-top{align-items:start}&.-v-align-middle{align-items:center}&.-v-align-bottom{align-items:end}@supports (grid-template-columns:subgrid){&.-layout-aligned{grid-template-columns:auto 1fr;align-items:center}&.-layout-aligned>.instui-form-field{grid-column:1/-1;grid-template-columns:subgrid;grid-template-areas:"label controls"".messages";align-items:center;display:grid}}}

package/dist/form-field-messages.css

@@ -1 +1 @@
-.instui-form-field-messages{gap:var(--instui-component-form-field-layout-gap-primitives);flex-direction:column;display:flex}.instui-form-field-message{font-family:var(--instui-component-form-field-message-font-family);font-size:var(--instui-component-form-field-message-font-size);font-weight:var(--instui-component-form-field-message-font-weight);line-height:var(--instui-component-form-field-message-line-height);color:var(--instui-component-form-field-message-hint-text-color);align-items:center;gap:.25rem;display:inline-flex}.instui-form-field-message.-type-hint{color:var(--instui-component-form-field-message-hint-text-color)}.instui-form-field-message.-type-error{color:var(--instui-component-form-field-message-error-text-color)}.instui-form-field-message.-type-success{color:var(--instui-component-form-field-message-success-text-color)}.instui-form-field-message.-type-error:before,.instui-form-field-message.-type-success:before{content:"";background:currentColor;flex:none;block-size:1em;inline-size:1em}.instui-form-field-message.-type-error:before{-webkit-mask:var(--instui-icon-circle-alert) center / contain no-repeat;mask:var(--instui-icon-circle-alert) center / contain no-repeat}.instui-form-field-message.-type-success:before{-webkit-mask:var(--instui-icon-circle-check) center / contain no-repeat;mask:var(--instui-icon-circle-check) center / contain no-repeat}.instui-form-field-message.-type-screenreader-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.instui-form-field-message.-type-new-error{color:var(--instui-component-form-field-message-error-text-color)}.instui-form-field-message.-type-new-error:before,.instui-form-field-message.-type-success:before{content:"";background:currentColor;flex:none;block-size:1em;inline-size:1em}.instui-form-field-message.-type-new-error:before{-webkit-mask:var(--instui-icon-circle-alert) center / contain no-repeat;mask:var(--instui-icon-circle-alert) center / contain no-repeat}
+@scope(.instui-form-field-messages){&{gap:var(--instui-component-form-field-layout-gap-primitives);flex-direction:column;display:flex}}@scope(.instui-form-field-message){&{font-family:var(--instui-component-form-field-message-font-family);font-size:var(--instui-component-form-field-message-font-size);font-weight:var(--instui-component-form-field-message-font-weight);line-height:var(--instui-component-form-field-message-line-height);color:var(--instui-component-form-field-message-hint-text-color);align-items:center;gap:.25rem;display:inline-flex}&.-type-hint{color:var(--instui-component-form-field-message-hint-text-color)}&.-type-error{color:var(--instui-component-form-field-message-error-text-color)}&.-type-success{color:var(--instui-component-form-field-message-success-text-color)}&.-type-error:before,&.-type-success:before{content:"";background:currentColor;flex:none;block-size:1em;inline-size:1em}&.-type-error:before{-webkit-mask:var(--instui-icon-circle-alert) center / contain no-repeat;mask:var(--instui-icon-circle-alert) center / contain no-repeat}&.-type-success:before{-webkit-mask:var(--instui-icon-circle-check) center / contain no-repeat;mask:var(--instui-icon-circle-check) center / contain no-repeat}&.-type-screenreader-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}

package/dist/form-field.css

@@ -1 +1 @@
-.instui-form-field{gap:var(--instui-component-form-field-layout-gap-inputs);color:var(--instui-component-form-field-layout-text-color);font-family:var(--instui-component-form-field-layout-font-family);grid-template-columns:1fr;grid-template-areas:"label""controls""messages";display:grid}@scope(.instui-form-field){:scope>.label{color:var(--instui-component-form-field-layout-text-color);font-family:var(--instui-component-form-field-layout-font-family);font-weight:var(--instui-component-form-field-layout-font-weight);font-size:var(--instui-component-form-field-layout-font-size);line-height:var(--instui-component-form-field-layout-line-height);grid-area:label}:scope>.controls{grid-area:controls}}.instui-form-field>.instui-form-field-messages{grid-area:messages}.instui-form-field .instui-form-field-message.-type-error,.instui-form-field .instui-form-field-message.-type-new-error{display:none}.instui-form-field:has(:user-invalid) .instui-form-field-message.-type-error,.instui-form-field:has(:user-invalid) .instui-form-field-message.-type-new-error,.instui-form-field.-invalid .instui-form-field-message.-type-error,.instui-form-field.-invalid .instui-form-field-message.-type-new-error{display:inline-flex}.instui-form-field:is(.-required,:has(:required)) .label:after{content:"*";color:var(--instui-component-form-field-layout-asterisk-color);margin-inline-start:.25rem}.instui-form-field.-readonly .label{color:var(--instui-component-form-field-layout-readonly-text-color)}.instui-form-field.-layout-stacked{grid-template-columns:1fr;grid-template-areas:"label""controls""messages"}.instui-form-field.-layout-inline{align-items:center;column-gap:var(--instui-component-form-field-layout-gap-primitives);grid-template-columns:auto 1fr;grid-template-areas:"label controls"".messages"}.instui-form-field.-layout-inline.-v-align-top{align-items:start}.instui-form-field.-layout-inline.-v-align-bottom{align-items:end}.instui-form-field.-layout-inline.-label-align-start .label{text-align:start}.instui-form-field.-layout-inline.-label-align-end .label{text-align:end}.instui-form-field.-inline{inline-size:auto;display:inline-grid}
+.instui-form-field{gap:var(--instui-component-form-field-layout-gap-inputs);color:var(--instui-component-form-field-layout-text-color);font-family:var(--instui-component-form-field-layout-font-family);grid-template-columns:1fr;grid-template-areas:"label""controls""messages";display:grid}@scope(.instui-form-field){:scope{&>.label{color:var(--instui-component-form-field-layout-text-color);font-family:var(--instui-component-form-field-layout-font-family);font-weight:var(--instui-component-form-field-layout-font-weight);font-size:var(--instui-component-form-field-layout-font-size);line-height:var(--instui-component-form-field-layout-line-height);grid-area:label}&>.controls{grid-area:controls}}}.instui-form-field>.instui-form-field-messages{grid-area:messages}.instui-form-field .instui-form-field-message.-type-error,.instui-form-field .instui-form-field-message.-type-new-error{display:none}.instui-form-field:has(:user-invalid) .instui-form-field-message.-type-error,.instui-form-field:has(:user-invalid) .instui-form-field-message.-type-new-error,.instui-form-field.-invalid .instui-form-field-message.-type-error,.instui-form-field.-invalid .instui-form-field-message.-type-new-error{display:inline-flex}.instui-form-field:is(.-required,:has(:required)) .label:after{content:"*";color:var(--instui-component-form-field-layout-asterisk-color);margin-inline-start:.25rem}.instui-form-field.-readonly .label{color:var(--instui-component-form-field-layout-readonly-text-color)}.instui-form-field.-layout-stacked{grid-template-columns:1fr;grid-template-areas:"label""controls""messages"}.instui-form-field.-layout-inline{align-items:center;column-gap:var(--instui-component-form-field-layout-gap-primitives);grid-template-columns:auto 1fr;grid-template-areas:"label controls"".messages"}.instui-form-field.-layout-inline.-v-align-top{align-items:start}.instui-form-field.-layout-inline.-v-align-bottom{align-items:end}.instui-form-field.-layout-inline.-label-align-start .label{text-align:start}.instui-form-field.-layout-inline.-label-align-end .label{text-align:end}.instui-form-field.-inline{inline-size:auto;display:inline-grid}

package/dist/img.css

@@ -1 +1 @@
-.instui-img{--pantoken-img-filter:none;block-size:auto;max-inline-size:100%;filter:var(--pantoken-img-filter);transition:filter var(--instui-component-img-effect-transition-duration) ease;display:inline-block}.instui-img.-display-block{display:block}.instui-img.-constrain-cover{object-fit:cover;block-size:100%;inline-size:100%}.instui-img.-constrain-contain{object-fit:contain;block-size:100%;inline-size:100%}.instui-img.-with-grayscale{--pantoken-img-filter:grayscale(1)}.instui-img.-with-blur{--pantoken-img-filter:blur(var(--instui-component-img-image-blur-amount))}.instui-img.-with-grayscale.-with-blur{--pantoken-img-filter:grayscale(1) blur(var(--instui-component-img-image-blur-amount))}
+@scope(.instui-img){&{--pantoken-img-filter:none;block-size:auto;max-inline-size:100%;filter:var(--pantoken-img-filter);transition:filter var(--instui-component-img-effect-transition-duration) ease;display:inline-block}&.-display-block{display:block}&.-constrain-cover{object-fit:cover;block-size:100%;inline-size:100%}&.-constrain-contain{object-fit:contain;block-size:100%;inline-size:100%}&.-with-grayscale{--pantoken-img-filter:grayscale(1)}&.-with-blur{--pantoken-img-filter:blur(var(--instui-component-img-image-blur-amount))}&.-with-grayscale.-with-blur{--pantoken-img-filter:grayscale(1) blur(var(--instui-component-img-image-blur-amount))}}

package/dist/in-place-edit.css

@@ -1 +1 @@
-.instui-in-place-edit{min-inline-size:2rem;padding:var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);border:var(--instui-component-text-input-border-width) solid transparent;border-radius:var(--instui-component-text-input-border-radius);color:var(--instui-color-text-base);font:inherit;cursor:text;display:inline-block}.instui-in-place-edit:hover{background:var(--instui-color-background-muted)}.instui-in-place-edit:focus{background:var(--instui-component-text-input-background-color);border-color:var(--instui-component-text-input-border-color);outline:none}.instui-in-place-edit:focus-visible{outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset)}.instui-in-place-edit.-readonly{cursor:default}.instui-in-place-edit.-readonly:hover{background:0 0}
+@scope(.instui-in-place-edit){&{min-inline-size:2rem;padding:var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);border:var(--instui-component-text-input-border-width) solid transparent;border-radius:var(--instui-component-text-input-border-radius);color:var(--instui-color-text-base);font:inherit;cursor:text;display:inline-block}&:hover{background:var(--instui-color-background-muted)}&:focus{background:var(--instui-component-text-input-background-color);border-color:var(--instui-component-text-input-border-color);outline:none}&:focus-visible{outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset)}&.-readonly{cursor:default}&.-readonly:hover{background:0 0}}