@breadstone/mosaik-elements-foundation 0.0.268 → 0.0.270

package/Controls/Components/Inputs/FileBox/IFileBoxElementProps.d.ts

@@ -0,0 +1,25 @@
+import type { IAppearanceableProps } from '../../../Behaviors/Appearanceable';
+import type { IClearableProps } from '../../../Behaviors/Clearable';
+import type { IDisableableProps } from '../../../Behaviors/Disableable';
+import type { IInvalidableProps } from '../../../Behaviors/Invalidable';
+import type { ILabelableProps } from '../../../Behaviors/Labelable';
+import type { IValueableProps } from '../../../Behaviors/Valueable';
+import type { IVariantableProps } from '../../../Behaviors/Variantable';
+/**
+ * Represents the `IFileBoxElementProps` interface.
+ *
+ * @public
+ */
+export interface IFileBoxElementProps extends IValueableProps, IDisableableProps, IVariantableProps, ILabelableProps, IInvalidableProps, IAppearanceableProps, IClearableProps {
+    value: string;
+    readonly: boolean;
+    required: boolean;
+    autofocus: boolean;
+    name: string;
+    placeholder: string;
+    multiple: boolean;
+    accept: Array<string>;
+    directory: boolean;
+    files: ReadonlyArray<File>;
+}
+//# sourceMappingURL=IFileBoxElementProps.d.ts.map

package/Controls/Components/Inputs/FileBox/IFileBoxElementProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFileBoxElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/FileBox/IFileBoxElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAIxE;;;;GAIG;AACH,MAAM,WAAW,oBACb,SAAQ,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,eAAe,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,eAAe;IAIxI,KAAK,EAAE,MAAM,CAAC;IAEd,QAAQ,EAAE,OAAO,CAAC;IAElB,QAAQ,EAAE,OAAO,CAAC;IAElB,SAAS,EAAE,OAAO,CAAC;IAEnB,IAAI,EAAE,MAAM,CAAC;IAEb,WAAW,EAAE,MAAM,CAAC;IAEpB,QAAQ,EAAE,OAAO,CAAC;IAElB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAEtB,SAAS,EAAE,OAAO,CAAC;IAEnB,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;CAI9B"}

package/Controls/Components/Inputs/FileBox/IFileBoxElementProps.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=IFileBoxElementProps.js.map

package/Controls/Components/Inputs/FileBox/IFileBoxElementProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFileBoxElementProps.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/FileBox/IFileBoxElementProps.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

package/Controls/Components/Inputs/FileBox/Themes/FileBoxElement.Cosmopolitan.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function fileBoxElementCosmopolitanStyle(): CSSResult;
+//# sourceMappingURL=FileBoxElement.Cosmopolitan.d.ts.map

package/Controls/Components/Inputs/FileBox/Themes/FileBoxElement.Cosmopolitan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileBoxElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/FileBox/Themes/FileBoxElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CAgN3D"}

package/Controls/Components/Inputs/FileBox/Themes/FileBoxElement.Cosmopolitan.js

@@ -0,0 +1,222 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function fileBoxElementCosmopolitanStyle() {
+    return css `
+:host {
+  --filebox-background-color: unset;
+  --filebox-border-color: unset;
+  --filebox-border-radius: unset;
+  --filebox-border-style: unset;
+  --filebox-border-width: unset;
+  --filebox-focus-ring-width: 0px;
+  --filebox-font-family: var(--cosmopolitan-font-family);
+  --filebox-font-letter-spacing: unset;
+  --filebox-font-line-height: unset;
+  --filebox-font-size: 16px;
+  --filebox-font-text-decoration: unset;
+  --filebox-font-text-transform: unset;
+  --filebox-font-weight: normal;
+  --filebox-foreground-color: unset;
+  --filebox-gap: var(--cosmopolitan-layout-space);
+  --filebox-height: unset;
+  --filebox-padding-bottom: var(--cosmopolitan-layout-space);
+  --filebox-padding-left: calc(var(--cosmopolitan-layout-space) * 1.5);
+  --filebox-padding-right: calc(var(--cosmopolitan-layout-space) * 1.5);
+  --filebox-padding-top: var(--cosmopolitan-layout-space);
+  --filebox-shadow: var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0);
+  --filebox-shadow-blur: var(--cosmopolitan-elevation-semilight-blur-0);
+  --filebox-shadow-color: var(--cosmopolitan-elevation-semilight-color-0);
+  --filebox-shadow-offset-x: var(--cosmopolitan-elevation-semilight-offset-x-0);
+  --filebox-shadow-offset-y: var(--cosmopolitan-elevation-semilight-offset-y-0);
+  --filebox-shadow-spread: var(--cosmopolitan-elevation-semilight-spread-0);
+  --filebox-transition-duration: var(--cosmopolitan-duration-short);
+  --filebox-transition-mode: ease;
+  --filebox-transition-property: background-color, color, border-color, opacity, box-shadow;
+  --filebox-translate: none;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host input {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: inherit;
+  margin: 0;
+  overflow: visible;
+}
+
+:host {
+  font-family: var(--filebox-font-family);
+  font-size: var(--filebox-font-size);
+  line-height: var(--filebox-font-line-height);
+  font-weight: var(--filebox-font-weight);
+  letter-spacing: var(--filebox-font-letter-spacing);
+  -webkit-text-decoration: var(--filebox-font-text-decoration);
+  text-decoration: var(--filebox-font-text-decoration);
+  text-transform: var(--filebox-font-text-transform);
+  padding-top: var(--filebox-padding-top);
+  padding-right: var(--filebox-padding-right);
+  padding-bottom: var(--filebox-padding-bottom);
+  padding-left: var(--filebox-padding-left);
+  gap: var(--filebox-gap);
+  transition-duration: var(--filebox-transition-duration);
+  transition-timing-function: var(--filebox-transition-mode);
+  transition-property: var(--filebox-transition-property);
+  translate: var(--filebox-translate);
+  background: var(--filebox-background-color);
+  color: var(--filebox-foreground-color);
+  border-color: var(--filebox-border-color);
+  border-width: var(--filebox-border-width);
+  border-radius: var(--filebox-border-radius);
+  border-style: var(--filebox-border-style);
+  min-height: var(--filebox-height);
+  cursor: text;
+  z-index: 0;
+  outline: none;
+  flex-direction: row;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="prefix"] {
+  gap: var(--filebox-gap);
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="prefix"][hidden] {
+  display: none;
+}
+
+:host [part="inner"] {
+  width: 100%;
+  height: 100%;
+  padding: var(--filebox-padding-top) var(--filebox-padding-right) var(--filebox-padding-bottom) var(--filebox-padding-left);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+:host [part="label"] {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  transform-origin: 0 0;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  will-change: transform;
+  transition-property: transform, font-size, color, letter-spacing, top;
+  transition-duration: .2s;
+  transition-timing-function: ease;
+  display: block;
+  position: absolute;
+  top: 10px;
+  overflow: hidden;
+  transform: translateY(0);
+}
+
+:host [part="label"].floating {
+  top: unset;
+  font-size: 12px;
+  transform: translateY(-50%);
+}
+
+:host [part="suffix"] {
+  gap: var(--filebox-gap);
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="suffix"][hidden] {
+  display: none;
+}
+
+:host [part="input"] {
+  color: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+  outline: none;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+:host [part="clear"], :host [part="browse"] {
+  cursor: pointer;
+}
+
+:host([has-label]) [part="inner"] [part="input"] {
+  padding-top: 12px;
+}
+
+:host([has-label]) [part="inner"] {
+  padding-bottom: unset;
+}
+
+:host([required]) [part="label"]:after {
+  content: "*";
+  margin-left: 2px;
+}
+
+:host([text-align="left"]) [part="input"] {
+  text-align: left;
+}
+
+:host([text-align="center"]) [part="input"] {
+  text-align: center;
+}
+
+:host([text-align="right"]) [part="input"] {
+  text-align: right;
+}
+
+    `;
+}
+//# sourceMappingURL=FileBoxElement.Cosmopolitan.js.map

package/Controls/Components/Inputs/FileBox/Themes/FileBoxElement.Cosmopolitan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileBoxElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/FileBox/Themes/FileBoxElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8MT,CAAC;AACN,CAAC"}

package/Controls/Components/Inputs/FileBox/Themes/FileBoxElement.Joy.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function fileBoxElementJoyStyle(): CSSResult;
+//# sourceMappingURL=FileBoxElement.Joy.d.ts.map

package/Controls/Components/Inputs/FileBox/Themes/FileBoxElement.Joy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileBoxElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/FileBox/Themes/FileBoxElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,SAAS,CAyYlD"}

package/Controls/Components/Inputs/FileBox/Themes/FileBoxElement.Joy.js

@@ -0,0 +1,407 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function fileBoxElementJoyStyle() {
+    return css `
+:host {
+  --filebox-background-color: var(--joy-scheme-background);
+  --filebox-border-color: var(--joy-scheme-highlight);
+  --filebox-border-radius: var(--joy-layout-radius);
+  --filebox-border-style: solid;
+  --filebox-border-width: var(--joy-layout-thickness);
+  --filebox-focus-ring-width: 0px;
+  --filebox-font-family: var(--joy-font-family);
+  --filebox-font-letter-spacing: unset;
+  --filebox-font-line-height: unset;
+  --filebox-font-size: var(--joy-typography-body1-font-size);
+  --filebox-font-text-decoration: unset;
+  --filebox-font-text-transform: unset;
+  --filebox-font-weight: normal;
+  --filebox-foreground-color: var(--joy-scheme-foreground);
+  --filebox-gap: var(--joy-layout-space);
+  --filebox-height: 56px;
+  --filebox-padding-bottom: var(--joy-layout-space);
+  --filebox-padding-left: calc(var(--joy-layout-space) * 1.5);
+  --filebox-padding-right: calc(var(--joy-layout-space) * 1.5);
+  --filebox-padding-top: var(--joy-layout-space);
+  --filebox-shadow: var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0);
+  --filebox-shadow-blur: var(--joy-elevation-semilight-blur-0);
+  --filebox-shadow-color: var(--joy-elevation-semilight-color-0);
+  --filebox-shadow-offset-x: var(--joy-elevation-semilight-offset-x-0);
+  --filebox-shadow-offset-y: var(--joy-elevation-semilight-offset-y-0);
+  --filebox-shadow-spread: var(--joy-elevation-semilight-spread-0);
+  --filebox-transition-duration: var(--joy-duration-short);
+  --filebox-transition-mode: ease;
+  --filebox-transition-property: background-color, color, border-color, opacity, box-shadow;
+  --filebox-translate: none;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host input {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: inherit;
+  margin: 0;
+  overflow: visible;
+}
+
+:host {
+  font-family: var(--filebox-font-family);
+  font-size: var(--filebox-font-size);
+  line-height: var(--filebox-font-line-height);
+  font-weight: var(--filebox-font-weight);
+  letter-spacing: var(--filebox-font-letter-spacing);
+  -webkit-text-decoration: var(--filebox-font-text-decoration);
+  text-decoration: var(--filebox-font-text-decoration);
+  text-transform: var(--filebox-font-text-transform);
+  padding-top: var(--filebox-padding-top);
+  padding-right: var(--filebox-padding-right);
+  padding-bottom: var(--filebox-padding-bottom);
+  padding-left: var(--filebox-padding-left);
+  gap: var(--filebox-gap);
+  transition-duration: var(--filebox-transition-duration);
+  transition-timing-function: var(--filebox-transition-mode);
+  transition-property: var(--filebox-transition-property);
+  translate: var(--filebox-translate);
+  background: var(--filebox-background-color);
+  color: var(--filebox-foreground-color);
+  border-color: var(--filebox-border-color);
+  border-width: var(--filebox-border-width);
+  border-radius: var(--filebox-border-radius);
+  border-style: var(--filebox-border-style);
+  min-height: var(--filebox-height);
+  cursor: text;
+  z-index: 0;
+  outline: none;
+  flex-direction: row;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="prefix"] {
+  gap: var(--filebox-gap);
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="prefix"][hidden] {
+  display: none;
+}
+
+:host [part="inner"] {
+  width: 100%;
+  height: 100%;
+  padding: var(--filebox-padding-top) var(--filebox-padding-right) var(--filebox-padding-bottom) var(--filebox-padding-left);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+:host [part="label"] {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  transform-origin: 0 0;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  will-change: transform;
+  transition-property: transform, font-size, color, letter-spacing, top;
+  transition-duration: .2s;
+  transition-timing-function: ease;
+  display: block;
+  position: absolute;
+  top: 10px;
+  overflow: hidden;
+  transform: translateY(0);
+}
+
+:host [part="label"].floating {
+  top: unset;
+  font-size: 12px;
+  transform: translateY(-50%);
+}
+
+:host [part="suffix"] {
+  gap: var(--filebox-gap);
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="suffix"][hidden] {
+  display: none;
+}
+
+:host [part="input"] {
+  color: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+  outline: none;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+:host [part="clear"], :host [part="browse"] {
+  cursor: pointer;
+}
+
+:host([has-label]) [part="inner"] [part="input"] {
+  padding-top: 12px;
+}
+
+:host([has-label]) [part="inner"] {
+  padding-bottom: unset;
+}
+
+:host([required]) [part="label"]:after {
+  content: "*";
+  margin-left: 2px;
+}
+
+:host([text-align="left"]) [part="input"] {
+  text-align: left;
+}
+
+:host([text-align="center"]) [part="input"] {
+  text-align: center;
+}
+
+:host([text-align="right"]) [part="input"] {
+  text-align: right;
+}
+
+:host [part="label"] {
+  color: var(--joy-scheme-middlelight);
+}
+
+:host [part="input"]::-moz-selection {
+  background-color: var(--joy-scheme-selection);
+}
+
+:host [part="input"]::selection {
+  background-color: var(--joy-scheme-selection);
+}
+
+:host [part="browse"] {
+  margin-right: var(--joy-layout-space);
+  margin-left: var(--joy-layout-space);
+}
+
+:host([disabled]:not([disabled="false"])), :host([readonly]) {
+  cursor: default;
+  --filebox-border-color: var(--joy-scheme-disabled);
+}
+
+:host([disabled]:not([disabled="false"])) {
+  --filebox-background-color: var(--joy-scheme-semi-transparent);
+  --filebox-foreground-color: var(--joy-scheme-disabled);
+}
+
+:host([invalid]) {
+  --filebox-border-color: var(--joy-color-danger-500);
+  --filebox-foreground-color: var(--joy-color-danger-500);
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --filebox-border-color: var(--joy-color-primary-500);
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-primary-500);
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --filebox-border-color: var(--joy-color-primary-500);
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-primary-500);
+}
+
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --filebox-border-color: var(--joy-color-secondary-500);
+}
+
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-secondary-500);
+}
+
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --filebox-border-color: var(--joy-color-secondary-500);
+}
+
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-secondary-500);
+}
+
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --filebox-border-color: var(--joy-color-tertiary-500);
+}
+
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-tertiary-500);
+}
+
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --filebox-border-color: var(--joy-color-tertiary-500);
+}
+
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-tertiary-500);
+}
+
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --filebox-border-color: var(--joy-color-danger-500);
+}
+
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-danger-500);
+}
+
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --filebox-border-color: var(--joy-color-danger-500);
+}
+
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-danger-500);
+}
+
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --filebox-border-color: var(--joy-color-warning-500);
+}
+
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-warning-500);
+}
+
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --filebox-border-color: var(--joy-color-warning-500);
+}
+
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-warning-500);
+}
+
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --filebox-border-color: var(--joy-color-success-500);
+}
+
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-success-500);
+}
+
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --filebox-border-color: var(--joy-color-success-500);
+}
+
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-success-500);
+}
+
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --filebox-border-color: var(--joy-color-info-500);
+}
+
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-info-500);
+}
+
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --filebox-border-color: var(--joy-color-info-500);
+}
+
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-info-500);
+}
+
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --filebox-border-color: var(--joy-color-highlight-500);
+}
+
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-highlight-500);
+}
+
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --filebox-border-color: var(--joy-color-highlight-500);
+}
+
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-highlight-500);
+}
+
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --filebox-border-color: var(--joy-color-neutral-500);
+}
+
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-neutral-500);
+}
+
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --filebox-border-color: var(--joy-color-neutral-500);
+}
+
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-neutral-500);
+}
+
+:host([appearance="plain"]) {
+  --filebox-border-width: 0;
+  --filebox-background-color: var(--joy-scheme-transparent);
+}
+
+:host([appearance="soft"]), :host([appearance="solid"]) {
+  --filebox-background-color: var(--joy-scheme-highlight);
+}
+
+    `;
+}
+//# sourceMappingURL=FileBoxElement.Joy.js.map