vira 29.6.0 → 29.7.0

package/dist/elements/vira-select.element.d.ts

@@ -30,6 +30,8 @@ export declare const ViraSelect: import("element-vir").DeclarativeElementDefinit
     icon: Readonly<ViraIconSvg>;
     placeholder: string;
     label: string;
+    /** If set to `true`, only minimal styles are applied. */
+    rawSelect: boolean;
     disabled: boolean;
     attributePassthrough: Readonly<PartialWithUndefined<{
         label: AttributeValues;
@@ -45,4 +47,4 @@ export declare const ViraSelect: import("element-vir").DeclarativeElementDefinit
     randomId: string;
 }, {
     valueChange: import("element-vir").DefineEvent<string>;
-}, "vira-select-disabled" | "vira-select-error", "vira-select-padding-horizontal" | "vira-select-padding-vertical" | "vira-select-icon-padding", readonly [], readonly []>;
+}, "vira-select-disabled" | "vira-select-error" | "vira-select-not-raw", "vira-select-padding-horizontal" | "vira-select-padding-vertical" | "vira-select-icon-padding", readonly [], readonly []>;

package/dist/elements/vira-select.element.js

@@ -38,6 +38,7 @@ export const ViraSelect = defineViraElement()({
     hostClasses: {
         'vira-select-disabled': ({ inputs }) => !!inputs.disabled,
         'vira-select-error': ({ inputs }) => !!inputs.hasError,
+        'vira-select-not-raw': ({ inputs }) => !inputs.rawSelect,
     },
     styles: ({ hostClasses, cssVars }) => css `
         :host {
@@ -56,14 +57,6 @@ export const ViraSelect = defineViraElement()({
             box-sizing: border-box;
             align-items: center;
             position: relative;
-            border-radius: ${viraFormCssVars['vira-form-radius'].value};
-            color: ${viraFormCssVars['vira-form-foreground-color'].value};
-            background-color: ${viraFormCssVars['vira-form-background-color'].value};
-            /*
-                Border colors are actually applied via the .wrapper-border class. However, we must
-                apply a border here still so that it takes up space.
-            */
-            border: 1px solid transparent;
             cursor: pointer;
 
             & select {
@@ -76,20 +69,12 @@ export const ViraSelect = defineViraElement()({
                 border: none;
                 background: none;
                 border-radius: inherit;
-                padding: ${cssVars['vira-select-padding-vertical'].value} 31px
-                    ${cssVars['vira-select-padding-vertical'].value}
-                    ${cssVars['vira-select-padding-horizontal'].value};
                 cursor: pointer;
+                /* Prevent the left pixel of text getting cut off. */
+                padding-left: 0.5px;
                 overflow: hidden;
                 text-overflow: ellipsis;
 
-                &:focus:focus-visible:not([aria-disabled='true']) ~ .focus-border {
-                    ${createFocusStyles({
-        elementBorderSize: 0,
-        noNesting: true,
-    })}
-                }
-
                 &.placeholder {
                     color: ${viraFormCssVars['vira-form-placeholder-color'].value};
                 }
@@ -112,24 +97,51 @@ export const ViraSelect = defineViraElement()({
                     left: 10px;
                 }
             }
+        }
 
-            & .border-style {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
+        ${hostClasses['vira-select-not-raw'].selector} {
+            .select-wrapper {
                 border-radius: ${viraFormCssVars['vira-form-radius'].value};
-                z-index: 0;
-                pointer-events: none;
-            }
+                color: ${viraFormCssVars['vira-form-foreground-color'].value};
+                background-color: ${viraFormCssVars['vira-form-background-color'].value};
+                /*
+                    Border colors are actually applied via the .wrapper-border class. However, we must
+                    apply a border here still so that it takes up space.
+                */
+                border: 1px solid transparent;
+                cursor: pointer;
 
-            & .wrapper-border {
-                top: -1px;
-                left: -1px;
-                border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
-                transition: border
-                    ${viraAnimationDurations['vira-interaction-animation-duration'].value};
+                & select {
+                    padding: ${cssVars['vira-select-padding-vertical'].value} 31px
+                        ${cssVars['vira-select-padding-vertical'].value}
+                        ${cssVars['vira-select-padding-horizontal'].value};
+
+                    &:focus:focus-visible:not([aria-disabled='true']) ~ .focus-border {
+                        ${createFocusStyles({
+        elementBorderSize: 0,
+        noNesting: true,
+    })}
+                    }
+                }
+
+                & .border-style {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    border-radius: ${viraFormCssVars['vira-form-radius'].value};
+                    z-index: 0;
+                    pointer-events: none;
+                }
+
+                & .wrapper-border {
+                    top: -1px;
+                    left: -1px;
+                    border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
+                    transition: border
+                        ${viraAnimationDurations['vira-interaction-animation-duration'].value};
+                }
             }
         }
 
@@ -164,10 +176,9 @@ export const ViraSelect = defineViraElement()({
             }
         }
 
-        ${hostClasses['vira-select-error'].selector} {
-            & .wrapper-border {
-                border-color: ${viraFormCssVars['vira-form-error-color'].value};
-            }
+        :host(.${hostClasses['vira-select-not-raw'].name}.${hostClasses['vira-select-error'].name})
+            .wrapper-border {
+            border-color: ${viraFormCssVars['vira-form-error-color'].value};
         }
     `,
     render({ inputs, state, dispatch, events }) {

package/dist/elements/vira-tag.element.js

@@ -52,23 +52,7 @@ function generateThemeCss(colorVariant) {
             }
         }
         :host(
-                .vira-tag-color-${unsafeCSS(colorVariant)}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Standard)}.vira-tag-not-checked
-            )
-            button {
-            color: ${viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText]
-        .foreground.value};
-            background-color: transparent;
-            border-color: ${viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText].background.value};
-
-            &:hover {
-                background-color: ${viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.Invisible].background.value};
-            }
-            &:active {
-                background-color: ${viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.Decoration].background.value};
-            }
-        }
-        :host(
-                .vira-tag-color-${unsafeCSS(colorVariant)}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Subtle)}.vira-tag-not-checked
+                .vira-tag-color-${unsafeCSS(colorVariant)}.vira-tag-not-checked.vira-tag-not-checked.vira-tag-not-checked
             )
             button {
             color: ${viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText]
@@ -227,43 +211,52 @@ export const ViraTag = defineViraElement()({
                 .${hostClasses['vira-tag-color-plain'].name}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Standard)}
             )
             button {
-            ${colorCss(viraTheme.inverse[themeDefaultKey])}
-            border-color: ${viraTheme.inverse[themeDefaultKey].background.value}
+            ${colorCss(viraTheme.inverse[themeDefaultKey])};
+            border-color: ${viraTheme.inverse[themeDefaultKey].background.value};
 
             &:hover {
-                ${colorCss(viraTheme.colors['vira-grey-behind-bg-body'])}
-                border-color: ${viraTheme.inverse['vira-grey-behind-bg-body'].background.value}
+                ${colorCss(viraTheme.colors['vira-grey-behind-bg-non-body'])};
+                border-color: ${viraTheme.colors['vira-grey-behind-bg-non-body'].background.value};
             }
             &:active {
-                ${colorCss(viraTheme.inverse[themeDefaultKey])}
-                border-color: ${viraTheme.inverse[themeDefaultKey].background.value}
+                ${colorCss(viraTheme.inverse[themeDefaultKey])};
+                border-color: ${viraTheme.inverse[themeDefaultKey].background.value};
             }
         }
         :host(
-                .${hostClasses['vira-tag-color-plain'].name}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Standard)}.${hostClasses['vira-tag-not-checked'].name}
+                .${hostClasses['vira-tag-color-plain'].name}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Subtle)}
             )
             button {
-            color: ${viraTheme.colors[themeDefaultKey].foreground.value};
             background-color: transparent;
+            color: ${viraTheme.colors[themeDefaultKey].foreground.value};
             border-color: transparent;
         }
         :host(
-                .${hostClasses['vira-tag-color-plain'].name}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Subtle)}
+                .${hostClasses['vira-tag-color-plain'].name}.${hostClasses['vira-tag-not-checked']
+        .name}.${hostClasses['vira-tag-not-checked'].name}.${hostClasses['vira-tag-not-checked'].name}
             )
             button {
-            background-color: transparent;
             color: ${viraTheme.colors[themeDefaultKey].foreground.value};
+            background-color: transparent;
             border-color: transparent;
-
+        }
+        :host(
+                .${hostClasses['vira-tag-color-plain'].name}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Subtle)}
+            )
+            button,
+        :host(
+                .${hostClasses['vira-tag-color-plain'].name}.${hostClasses['vira-tag-not-checked']
+        .name}.${hostClasses['vira-tag-not-checked'].name}.${hostClasses['vira-tag-not-checked'].name}
+            )
+            button {
             &:hover {
                 ${colorCss(viraTheme.colors['vira-grey-behind-fg-small-body'])}
                 border-color: ${viraTheme.colors['vira-grey-behind-fg-small-body'].background
         .value};
             }
             &:active {
-                background-color: transparent;
-                color: ${viraTheme.colors[themeDefaultKey].foreground.value};
-                border-color: transparent;
+                ${colorCss(viraTheme.colors['vira-grey-behind-fg-body'])}
+                border-color: ${viraTheme.colors['vira-grey-behind-fg-body'].background.value};
             }
         }
     `,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "29.6.0",
+    "version": "29.7.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",