@warp-ds/elements 2.2.0-next.2 → 2.2.0-next.20

package/dist/packages/slider/styles/w-slider-thumb.styles.js

@@ -0,0 +1,132 @@
+import { css } from 'lit';
+/* For some reason the pseudoselectors for webkit and moz must be separate blocks :shrug: */
+export const wSliderThumbStyles = css `
+  .w-slider-thumb {
+    position: relative;
+    display: grid;
+    pointer-events: none; /* For range inputs we position two of these on top of each other. Let clicks go through the top one. */
+    grid-template-areas:
+      'slider slider slider'
+      'frommarker . tomarker'
+      'fromtextfield . totextfield';
+    grid-template-columns: 1fr 24px 1fr;
+  }
+
+  .w-slider-thumb__range {
+    appearance: none;
+    background-color: transparent;
+    grid-area: slider;
+    height: 44px; /* touch target */
+    pointer-events: none; /* let clicks pass through for range slider where we place two inputs over each other */
+  }
+
+  .w-slider-thumb__range::-webkit-slider-runnable-track {
+    box-shadow: none;
+    color: var(--w-s-color-text);
+    height: var(--w-slider-track-height);
+  }
+
+  .w-slider-thumb__range:hover::-webkit-slider-thumb {
+    background: var(--w-s-color-background-primary-hover);
+  }
+
+  .w-slider-thumb__range:hover::-moz-range-thumb {
+    background: var(--w-s-color-background-primary-hover);
+  }
+
+  /*
+    Use anchor positioning to place the tooltip target in relation to the slider thumb.
+    We use a polyfill to bring support to older Safari, Firefox at time of writing.
+   */
+  .w-slider-thumb__range::-webkit-slider-thumb {
+    anchor-name: --thumb;
+
+    appearance: none;
+    background: var(--w-s-color-background-primary);
+    border-radius: 50%;
+    height: var(--w-slider-thumb-size);
+    margin-top: calc(-1 * calc(var(--w-slider-thumb-offset) - calc(var(--w-slider-track-height) / 2)));
+    pointer-events: auto;
+    width: var(--w-slider-thumb-size);
+    z-index: 1;
+  }
+
+  .w-slider-thumb__range::-moz-range-thumb {
+    anchor-name: --thumb;
+
+    appearance: none;
+    background: var(--w-s-color-background-primary);
+    border-radius: 50%;
+    border-color: transparent;
+    height: var(--w-slider-thumb-size);
+    margin-top: calc(-1 * calc(var(--w-slider-thumb-offset) - calc(var(--w-slider-track-height) / 2)));
+    pointer-events: initial;
+    width: var(--w-slider-thumb-size);
+    z-index: 1;
+  }
+
+  .w-slider-thumb__tooltip {
+    display: none;
+    position: absolute;
+
+    background-color: var(--w-s-color-background-inverted);
+    color: var(--w-s-color-text-inverted-static);
+    border-color: var(--w-s-color-background-inverted);
+
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    z-index: 1;
+
+    position-anchor: --thumb;
+
+    bottom: calc(anchor(top) + 5px);
+    justify-self: anchor-center;
+  }
+
+  .w-slider-thumb__tooltip--visible {
+    display: block;
+  }
+
+  .w-slider-thumb__from-marker,
+  .w-slider-thumb__to-marker {
+    margin-inline: 2px; /* visual alignment with input border, slider thumb */
+    color: var(--w-s-color-text-subtle);
+    font-size: var(--w-font-size-s);
+    line-height: var(--w-line-height-s);
+  }
+
+  .w-slider-thumb__from-marker {
+    grid-area: frommarker;
+  }
+
+  .w-slider-thumb__to-marker {
+    grid-area: tomarker;
+    text-align: right;
+  }
+
+  .w-slider-thumb__textfield {
+    margin-top: 10px;
+    pointer-events: auto;
+    grid-row: 3 / 4;
+    grid-column: 1 / 3; /* Single sliders should have the text field use the fromtextfield _and_ gap portion of the CSS grid. */
+  }
+
+  :host([name='from']) .w-slider-thumb__textfield {
+    grid-column: 1 / 2; /* Range sliders should leave the gap empty. */
+  }
+
+  :host([name='from']) .w-slider-thumb__range::-webkit-slider-thumb {
+    margin-left: calc(-1px * var(--thumb-offset) / 2);
+  }
+
+  :host([name='to']) .w-slider-thumb__textfield {
+    grid-row: 3 / 4;
+    grid-column: 3 / 4;
+  }
+
+  :host([name='to']) .w-slider-thumb__range::-webkit-slider-thumb {
+    margin-left: calc(1px * var(--thumb-offset) / 2);
+  }
+`;

package/dist/packages/slider/styles/w-slider.styles.d.ts

@@ -0,0 +1 @@
+export declare const wSliderStyles: import("lit").CSSResult;

package/dist/packages/slider/styles/w-slider.styles.js

@@ -0,0 +1,118 @@
+import { css } from 'lit';
+export const wSliderStyles = css `
+  .w-slider {
+    position: relative;
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    width: 100%;
+    grid-template-areas:
+      'label'
+      'description'
+      'slider';
+    grid-template-columns: 1fr;
+
+    --w-slider-track-background: var(--w-s-color-background-disabled-subtle);
+    --w-slider-track-active-background: var(--w-s-color-background-primary);
+    --w-slider-track-height: 4px;
+    --w-slider-track-active-height: 6px;
+    --w-slider-thumb-background: var(--w-s-color-background-primary);
+    --w-slider-thumb-background-hover: var(--w-s-color-background-primary-hover);
+    --w-slider-thumb-size: 28px;
+    --w-slider-thumb-offset: calc(var(--w-slider-thumb-size) / 2);
+    --w-slider-marker-color: var(--w-s-color-border);
+
+    /* Math corner to calculate the fill of the slider and placement of markers. */
+
+    /* The --min value can be non-zero, f. ex. choosing a year from 1950 to 2025. Normalize the values so we start at 0 and run to max - min. */
+    --_value-range: calc(var(--max) - var(--min));
+    --_from-in-range: max(calc(var(--from) - var(--min)), 0);
+
+    /* limit to maximum value in range so typing a value larger than max doesn't explode layouts */
+    --_to-in-range: min(calc(var(--to) - var(--min)), var(--_value-range));
+
+    /* Position the starting point of the fill in the case of a non-zero --from value in a range slider.
+     * In other words, given a width of 100% how many percent should be left unfilled/blank
+     * at the beginning of the range slider (dashes in this ASCII-range-slider: |---O******O|) */
+    --_from-as-percent-of-max: calc(var(--_from-in-range) / var(--_value-range) * 100);
+    --_blank-values-before: var(--_from-as-percent-of-max);
+
+    /* Set the width of the fill as a percentage.
+     * In other words, given a width of 100% how many percent should be left unfilled/blank
+     * at the end of the slider (dashes in this ASCII-slider: |******O---|) */
+    --_to-as-percent-of-max: calc(var(--_to-in-range) / var(--_value-range) * 100);
+    --_filled-values: calc(var(--_to-as-percent-of-max) - var(--_blank-values-before));
+
+    /* Vertical position of range and markers */
+    --_range-top: calc(
+      var(--w-slider-thumb-size) / 2 + calc(var(--w-slider-track-active-height) - calc(var(--w-slider-track-height) / 2) + 1px)
+    );
+  }
+
+  .w-slider__label {
+    grid-area: label;
+    font-size: var(--w-font-size-s);
+    line-height: var(--w-line-height-s);
+    font-weight: bold;
+    padding-bottom: 8px;
+    color: var(--w-s-color-text);
+  }
+
+  .w-slider__description {
+    grid-area: description;
+  }
+
+  .w-slider__active-range {
+    align-self: center;
+    background: var(--w-slider-track-background);
+    border-radius: 4px;
+    position: absolute;
+    top: var(--_range-top);
+    left: 0;
+    right: 0;
+    grid-area: slider;
+  }
+
+  .w-slider__markers {
+    --_marker-height: 7px;
+    --_marker-width: 1px;
+
+    align-self: center;
+
+    /* Creates a linear gradient with --_marker-width wide markers
+       followed by enough transparent that we can repeat the gradient
+       along the X axis and have markers visible where we want them. */
+    background: linear-gradient(to right, var(--w-slider-marker-color) var(--_marker-width), rgba(0, 0, 0, 0) 1px) repeat-x;
+    --_step-width-as-percent: calc(var(--markers) / var(--_value-range) * 100);
+    background-size: calc(var(--_step-width-as-percent) * 1% - 0.1%) var(--_marker-height);
+
+    background-position: bottom 0 left 8px right 8px;
+    position: absolute;
+    top: calc(var(--_range-top) + 2px);
+    left: 1px;
+    right: 1px;
+    grid-area: slider;
+    height: var(--_marker-height);
+  }
+
+  .w-slider__active-range::before {
+    background: var(--w-slider-track-active-background);
+    border-radius: 4px;
+    content: '';
+    display: block;
+    height: var(--w-slider-track-active-height);
+
+    margin-left: calc(var(--_blank-values-before) * 1%);
+    width: calc(var(--_filled-values) * 1%);
+  }
+
+  slot::slotted(w-slider-thumb) {
+    position: static;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    grid-area: slider;
+  }
+`;

package/dist/packages/slider/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/slider/styles.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.hidden{display:none}.static{position:static}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`;

package/dist/packages/steps/index.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import '@warp-ds/icons/elements/check-16';
+/**
+ * Steps are used to show progress through a process or to guide users through a multi-step task.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)
+ */
+declare class WarpSteps extends LitElement {
+    horizontal: boolean;
+    right: boolean;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    updated(): void;
+    updateStepsContext(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+interface StepsContext {
+    horizontal?: boolean;
+    right?: boolean;
+    isLast?: boolean;
+    isFirst?: boolean;
+}
+/**
+ * Individual step component that shows a single step in a process
+ */
+declare class WarpStep extends LitElement {
+    active: boolean;
+    completed: boolean;
+    private _context;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    setContext(context: StepsContext): void;
+    getAriaLabel(): string;
+    render(): import("lit").TemplateResult<1>;
+}
+export { WarpSteps, WarpStep };