@redvars/peacock 3.6.3 → 3.8.0

package/src/code-highlighter/code-highlighter.ts

@@ -2,6 +2,8 @@ import { html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { classMap } from 'lit/directives/class-map.js';
+import pierreDark from '@pierre/theme/pierre-dark';
+import pierreLight from '@pierre/theme/pierre-light';
 
 import prettier from 'prettier/standalone';
 
@@ -113,12 +115,17 @@ export class CodeHighlighter extends LitElement {
         codeString = await prettier.format(codeString, {
           parser: 'babel',
           plugins: [prettierPluginBabel, prettierPluginEstree],
+          bracketSameLine: true,
+          // Helps if you are writing HTML inside template literals
+          htmlWhitespaceSensitivity: 'ignore',
         });
         break;
       case 'html':
         codeString = await prettier.format(codeString, {
           parser: 'html',
           plugins: [prettierPluginHtml],
+          bracketSameLine: true,
+          htmlWhitespaceSensitivity: 'ignore',
         });
         break;
       case 'css':
@@ -148,8 +155,10 @@ export class CodeHighlighter extends LitElement {
     this.compiledCode = await codeToHtml(codeString, {
       lang: this.language,
       themes: {
-        light: 'github-light',
-        dark: 'github-dark',
+        // @ts-ignore
+        light: pierreLight,
+        // @ts-ignore
+        dark: pierreDark,
       },
       transformers,
     });
@@ -195,17 +204,23 @@ export class CodeHighlighter extends LitElement {
         })}
       >
         <div class="header">
-          <div class="header-title">${this.language}</div>
+          <div class="header-title">
+            <slot name="title">${this.language?.toUpperCase()}</slot>
+          </div>
           <div class="header-actions">
             <wc-icon-button
               color=${this._copied ? 'success' : 'surface'}
               variant="text"
               size="xs"
-              aria-label=${this._copied ? locale.copied : locale.copyToClipboard}
+              aria-label=${this._copied
+                ? locale.copied
+                : locale.copyToClipboard}
               tooltip=${this._copied ? locale.copied : locale.copyToClipboard}
               @click=${this.__handleCopyClick}
             >
-              <wc-icon name="content_copy"></wc-icon>
+              <wc-icon
+                name=${this._copied ? 'check' : 'content_copy'}
+              ></wc-icon>
             </wc-icon-button>
           </div>
         </div>

package/src/condition-builder/cb-compound-expression.scss

@@ -19,6 +19,7 @@
     .field-label {
       @include mixin.get-typography-not-important(label-medium);
       color: var(--color-on-surface-variant);
+      text-align: center;
     }
 
     .field-compound-type {
@@ -29,6 +30,9 @@
 
   .conditions {
     flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
   }
 }
 

package/src/condition-builder/cb-compound-expression.ts

@@ -9,7 +9,6 @@ import styles from './cb-compound-expression.scss';
  * @rawTag cb-compound-expression
  * @summary A compound expression group in a condition builder that displays a field label, an optional condition operator divider, and slots for child expressions.
  * @tags condition-builder
- * @parentRawTag compound-builder
  *
  * @example
  * ```html

package/src/condition-builder/cb-divider.ts

@@ -10,7 +10,6 @@ import styles from './cb-divider.scss';
  * @rawTag cb-divider
  * @summary A divider line used within a condition builder to visually connect expressions with operator tags.
  * @tags condition-builder
- * @parentRawTag compound-builder
  *
  * @example
  * ```html

package/src/condition-builder/cb-expression.scss

@@ -10,5 +10,4 @@
   display: flex;
   gap: var(--spacing-100);
   align-items: center;
-  padding-bottom: var(--spacing-200);
 }

package/src/condition-builder/cb-expression.ts

@@ -9,7 +9,6 @@ import styles from './cb-expression.scss';
  * @rawTag cb-expression
  * @summary An expression row within a condition builder, containing an operator select and a slot for value inputs.
  * @tags condition-builder
- * @parentRawTag compound-builder
  *
  * @example
  * ```html

package/src/condition-builder/cb-predicate.ts

@@ -10,7 +10,6 @@ import styles from './cb-predicate.scss';
  * @rawTag cb-predicate
  * @summary A predicate container in a condition builder that can display conditions in horizontal or vertical layout with an optional logical operator divider.
  * @tags condition-builder
- * @parentRawTag compound-expression
  *
  * @example
  * ```html

package/src/elevation/elevation.scss

@@ -11,7 +11,11 @@
 .shadow,
 .shadow::before,
 .shadow::after {
-  @include mixin.apply-container-shape(elevation);
+  border-start-start-radius: var(--elevation-container-shape-start-start, var(--elevation-container-shape));
+  border-start-end-radius: var(--elevation-container-shape-start-end, var(--elevation-container-shape));
+  border-end-start-radius: var(--elevation-container-shape-end-start, var(--elevation-container-shape));
+  border-end-end-radius: var(--elevation-container-shape-end-end, var(--elevation-container-shape));
+  corner-shape: var(--elevation-container-shape-variant);
 
   inset: 0;
   position: absolute;

package/src/fab/fab-colors.scss

@@ -38,12 +38,12 @@
   --filled-fab-label-text-color: var(--color-on-tertiary);
 }
 
-.fab.variant-tonal {
+:host([variant='tonal']) {
   --_fab-container-color: var(--tonal-fab-container-color);
   --_fab-label-text-color: var(--tonal-fab-label-text-color);
 }
 
-.fab.variant-filled {
+:host([variant='filled']) {
   --_fab-container-color: var(--filled-fab-container-color);
   --_fab-label-text-color: var(--filled-fab-label-text-color);
 }

package/src/fab/fab-sizes.scss

@@ -1,47 +1,37 @@
-/* Small FAB: 40x40dp, shape-corner-medium */
+/* Small FAB: 40×40dp, shape-corner-medium */
 :host([size='sm']) {
   --fab-container-shape: var(--shape-corner-medium);
-}
-
-:host([size='sm']) .fab {
-  width: 2.5rem;
-  height: 2.5rem;
+  --fab-container-size: 2.5rem;
   --_fab-icon-size: 1.5rem;
+  --fab-extended-min-width: 4rem;
+
+  --_fab-font-size: 0.875rem;
+  --_fab-font-weight: var(--font-weight-medium);
+  --_fab-line-height: 1.25rem;
+  --_fab-letter-spacing: 0.1px;
 }
 
-/* Standard/Medium FAB: 56x56dp, shape-corner-large (default) */
-:host([size='md']) .fab {
-  width: 3.5rem;
-  height: 3.5rem;
+/* Standard/Medium FAB: 56×56dp, shape-corner-large (default) */
+:host([size='md']) {
+  --fab-container-size: 3.5rem;
   --_fab-icon-size: 1.5rem;
+  --fab-extended-min-width: 5rem;
+
+  --_fab-font-size: 0.875rem;
+  --_fab-font-weight: var(--font-weight-medium);
+  --_fab-line-height: 1.25rem;
+  --_fab-letter-spacing: 0.1px;
 }
 
-/* Large FAB: 96x96dp, shape-corner-extra-large */
+/* Large FAB: 96×96dp, shape-corner-extra-large */
 :host([size='lg']) {
   --fab-container-shape: var(--shape-corner-extra-large);
-}
-
-:host([size='lg']) .fab {
-  width: 6rem;
-  height: 6rem;
+  --fab-container-size: 6rem;
   --_fab-icon-size: 2.25rem;
-}
-
-/* Extended FAB overrides (height fixed, width auto) */
-:host([size='sm']) .fab.extended {
-  width: auto;
-  min-width: 4rem;
-  height: 2.5rem;
-}
-
-:host([size='md']) .fab.extended {
-  width: auto;
-  min-width: 5rem;
-  height: 3.5rem;
-}
+  --fab-extended-min-width: 6rem;
 
-:host([size='lg']) .fab.extended {
-  width: auto;
-  min-width: 6rem;
-  height: 6rem;
+  --_fab-font-size: 1rem;
+  --_fab-font-weight: var(--font-weight-medium);
+  --_fab-line-height: 1.5rem;
+  --_fab-letter-spacing: 0.15px;
 }

package/src/fab/fab.scss

@@ -3,6 +3,7 @@
 @include mixin.base-styles;
 
 :host {
+  position: relative;
   display: inline-flex;
 
   --fab-container-shape: var(--shape-corner-large);
@@ -23,12 +24,14 @@
 }
 
 .fab {
-  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: var(--fab-container-size);
+  height: var(--fab-container-size);
   border-radius: var(--fab-container-shape);
   font-family: var(--font-family-sans) !important;
+  z-index: 0;
 
   .fab-content {
     display: flex;
@@ -44,94 +47,97 @@
   }
 
   .fab-label {
-    font-size: 0.875rem;
-    font-weight: var(--font-weight-medium);
-    line-height: 1.25rem;
-    letter-spacing: 0.00625em;
+    font-size: var(--_fab-font-size) !important;
+    font-weight: var(--_fab-font-weight) !important;
+    line-height: var(--_fab-line-height) !important;
+    letter-spacing: var(--_fab-letter-spacing) !important;
     white-space: nowrap;
   }
 
   &.disabled {
     cursor: not-allowed;
   }
+}
 
-  /*
-    Background layers
-   */
-  .focus-ring {
-    z-index: 2;
-    --focus-ring-container-shape-start-start: var(--fab-container-shape);
-    --focus-ring-container-shape-start-end: var(--fab-container-shape);
-    --focus-ring-container-shape-end-start: var(--fab-container-shape);
-    --focus-ring-container-shape-end-end: var(--fab-container-shape);
-  }
+/* Extended FAB */
+.fab.extended {
+  width: auto;
+  min-width: var(--fab-extended-min-width);
+  padding: 0 1rem;
+  border-radius: var(--fab-container-shape);
+}
 
-  .ripple {
-    border-radius: var(--fab-container-shape);
-    --ripple-state-opacity: var(--_fab-container-state-opacity, 0);
-    --ripple-pressed-color: var(--_fab-label-text-color);
-  }
+/*
+  Background layers
+ */
+.focus-ring {
+  z-index: 2;
+  --focus-ring-container-shape-start-start: var(--fab-container-shape);
+  --focus-ring-container-shape-start-end: var(--fab-container-shape);
+  --focus-ring-container-shape-end-start: var(--fab-container-shape);
+  --focus-ring-container-shape-end-end: var(--fab-container-shape);
+}
 
-  .background {
-    display: block;
-    position: absolute;
-    inset: 0;
-    background-color: var(--_fab-container-color);
-    opacity: var(--_fab-container-opacity, 1);
-    border-radius: var(--fab-container-shape);
-    pointer-events: none;
-  }
+.ripple {
+  border-radius: var(--fab-container-shape);
+  --ripple-state-opacity: var(--_fab-container-state-opacity, 0);
+  --ripple-pressed-color: var(--_fab-label-text-color);
+}
 
-  .elevation {
-    --elevation-level: var(--_fab-container-elevation-level, var(--fab-container-elevation-level));
-    transition-duration: 280ms;
-    --elevation-container-shape-start-start: var(--fab-container-shape);
-    --elevation-container-shape-start-end: var(--fab-container-shape);
-    --elevation-container-shape-end-start: var(--fab-container-shape);
-    --elevation-container-shape-end-end: var(--fab-container-shape);
-  }
+.background {
+  display: block;
+  position: absolute;
+  inset: 0;
+  background-color: var(--_fab-container-color);
+  opacity: var(--_fab-container-opacity, 1);
+  border-radius: var(--fab-container-shape);
+  pointer-events: none;
+}
 
-  &:hover:not(.disabled) {
-    --_fab-container-elevation-level: 4;
-    --_fab-container-state-opacity: 0.08;
-  }
+.elevation {
+  --elevation-level: var(--_fab-container-elevation-level, var(--fab-container-elevation-level));
+  transition-duration: 280ms;
+  --elevation-container-shape-start-start: var(--fab-container-shape);
+  --elevation-container-shape-start-end: var(--fab-container-shape);
+  --elevation-container-shape-end-start: var(--fab-container-shape);
+  --elevation-container-shape-end-end: var(--fab-container-shape);
+}
 
-  &.pressed:not(.disabled) {
-    --_fab-container-elevation-level: 3;
-    --_fab-container-state-opacity: 0.12;
-  }
+/* State management */
+:host:hover:not([disabled]) {
+  --_fab-container-elevation-level: 4;
+  --_fab-container-state-opacity: 0.08;
+}
 
-  &.lowered {
-    --fab-container-elevation-level: 1;
+:host([pressed]):not([disabled]) {
+  --_fab-container-elevation-level: 3;
+  --_fab-container-state-opacity: 0.12;
+}
 
-    &:hover:not(.disabled) {
-      --_fab-container-elevation-level: 2;
-    }
+:host([lowered]) {
+  --fab-container-elevation-level: 1;
 
-    &.pressed:not(.disabled) {
-      --_fab-container-elevation-level: 1;
-    }
+  &:hover:not([disabled]) {
+    --_fab-container-elevation-level: 2;
   }
 
-  &.disabled {
-    --_fab-container-color: var(--color-on-surface);
-    --_fab-container-opacity: 0.12;
-    --_fab-label-text-color: var(--color-on-surface);
-    --_fab-label-text-opacity: 0.38;
-    --_fab-container-elevation-level: 0;
-
-    .ripple {
-      display: none;
-    }
-
-    .fab-content {
-      opacity: 0.38;
-    }
+  &[pressed]:not([disabled]) {
+    --_fab-container-elevation-level: 1;
   }
 }
 
-/* Extended FAB */
-.fab.extended {
-  padding: 0 1rem;
-  border-radius: var(--fab-container-shape);
+:host([disabled]) {
+  --_fab-container-color: var(--color-on-surface);
+  --_fab-container-opacity: 0.12;
+  --_fab-label-text-color: var(--color-on-surface);
+  --_fab-label-text-opacity: 0.38;
+  --_fab-container-elevation-level: 0;
+
+  .ripple {
+    display: none;
+  }
+
+  .fab-content {
+    opacity: 0.38;
+  }
 }