@material/web 0.1.0-alpha.0

package/ripple/lib/ripple.js

@@ -0,0 +1,215 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { createAnimationSignal, Easing } from '@material/web/motion/animation.js';
+import { html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+const PRESS_GROW_MS = 450;
+const MINIMUM_PRESS_MS = 225;
+const INITIAL_ORIGIN_SCALE = 0.2;
+const PADDING = 10;
+const SOFT_EDGE_MINIMUM_SIZE = 75;
+const SOFT_EDGE_CONTAINER_RATIO = 0.35;
+const PRESS_PSEUDO = '::after';
+const ANIMATION_FILL = 'forwards';
+/** @soyCompatible */
+export class Ripple extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.unbounded = false;
+        this.disabled = false;
+        this.hovered = false;
+        this.focused = false;
+        this.pressed = false;
+        this.rippleSize = '';
+        this.rippleScale = '';
+        this.initialSize = 0;
+        this.pressAnimationSignal = createAnimationSignal();
+        this.growAnimation = null;
+        this.delayedEndPressHandle = null;
+    }
+    /** @soyTemplate */
+    render() {
+        return html `<div class="md3-ripple-surface ${classMap(this.getRenderRippleClasses())}"></div>`;
+    }
+    /** @soyTemplate */
+    getRenderRippleClasses() {
+        return {
+            'md3-ripple--hovered': this.hovered,
+            'md3-ripple--focused': this.focused,
+            'md3-ripple--pressed': this.pressed,
+            'md3-ripple--unbounded': this.unbounded,
+        };
+    }
+    update(changedProps) {
+        if (changedProps.has('disabled') && this.disabled) {
+            this.endHover();
+            this.endFocus();
+            this.endPress();
+        }
+        super.update(changedProps);
+    }
+    getDimensions() {
+        return (this.parentElement ?? this).getBoundingClientRect();
+    }
+    determineRippleSize() {
+        const { height, width } = this.getDimensions();
+        const maxDim = Math.max(height, width);
+        const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);
+        let maxRadius = maxDim;
+        let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
+        const hypotenuse = Math.sqrt(width ** 2 + height ** 2);
+        maxRadius = hypotenuse + PADDING;
+        // ensure `initialSize` is even for unbounded
+        if (this.unbounded) {
+            initialSize = initialSize - (initialSize % 2);
+        }
+        this.initialSize = initialSize;
+        this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`;
+        this.rippleSize = `${this.initialSize}px`;
+    }
+    getNormalizedPointerEventCoords(pointerEvent) {
+        const { scrollX, scrollY } = window;
+        const { left, top } = this.getDimensions();
+        const documentX = scrollX + left;
+        const documentY = scrollY + top;
+        const { pageX, pageY } = pointerEvent;
+        return { x: pageX - documentX, y: pageY - documentY };
+    }
+    getTranslationCoordinates(positionEvent) {
+        const { height, width } = this.getDimensions();
+        // end in the center
+        const endPoint = {
+            x: (width - this.initialSize) / 2,
+            y: (height - this.initialSize) / 2,
+        };
+        let startPoint;
+        if (positionEvent instanceof PointerEvent) {
+            startPoint = this.getNormalizedPointerEventCoords(positionEvent);
+        }
+        else {
+            startPoint = {
+                x: width / 2,
+                y: height / 2,
+            };
+        }
+        // center around start point
+        startPoint = {
+            x: startPoint.x - (this.initialSize / 2),
+            y: startPoint.y - (this.initialSize / 2),
+        };
+        return { startPoint, endPoint };
+    }
+    startPressAnimation(positionEvent) {
+        this.determineRippleSize();
+        const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent);
+        const translateStart = `${startPoint.x}px, ${startPoint.y}px`;
+        const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;
+        const signal = this.pressAnimationSignal.start();
+        const growAnimation = this.mdRoot.animate({
+            top: [0, 0],
+            left: [0, 0],
+            height: [this.rippleSize, this.rippleSize],
+            width: [this.rippleSize, this.rippleSize],
+            transform: [
+                `translate(${translateStart}) scale(1)`,
+                `translate(${translateEnd}) scale(${this.rippleScale})`
+            ],
+        }, {
+            pseudoElement: PRESS_PSEUDO,
+            duration: PRESS_GROW_MS,
+            easing: Easing.STANDARD,
+            fill: ANIMATION_FILL
+        });
+        growAnimation.addEventListener('finish', () => {
+            this.pressAnimationSignal.finish();
+            this.growAnimation = null;
+        });
+        signal.addEventListener('abort', () => {
+            growAnimation.cancel();
+            this.growAnimation = null;
+        });
+        this.growAnimation = growAnimation;
+    }
+    /**
+     * @deprecated Use beginHover
+     */
+    startHover(hoverEvent) {
+        this.beginHover(hoverEvent);
+    }
+    beginHover(hoverEvent) {
+        if (hoverEvent?.pointerType !== 'touch') {
+            this.hovered = true;
+        }
+    }
+    endHover() {
+        this.hovered = false;
+    }
+    /**
+     * @deprecated Use beginFocus
+     */
+    startFocus() {
+        this.beginFocus();
+    }
+    beginFocus() {
+        this.focused = true;
+    }
+    endFocus() {
+        this.focused = false;
+    }
+    /**
+     * @deprecated Use beginPress
+     */
+    startPress(positionEvent) {
+        this.beginPress(positionEvent);
+    }
+    beginPress(positionEvent) {
+        this.pressed = true;
+        if (this.delayedEndPressHandle !== null) {
+            clearTimeout(this.delayedEndPressHandle);
+            this.delayedEndPressHandle = null;
+        }
+        this.startPressAnimation(positionEvent);
+    }
+    endPress() {
+        const pressAnimationPlayState = this.growAnimation?.currentTime ?? Infinity;
+        if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
+            this.pressed = false;
+        }
+        else {
+            this.delayedEndPressHandle = setTimeout(() => {
+                this.pressed = false;
+                this.delayedEndPressHandle = null;
+            }, MINIMUM_PRESS_MS - pressAnimationPlayState);
+        }
+    }
+}
+__decorate([
+    query('.md3-ripple-surface'),
+    __metadata("design:type", HTMLElement)
+], Ripple.prototype, "mdRoot", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Ripple.prototype, "unbounded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Ripple.prototype, "disabled", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Ripple.prototype, "hovered", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Ripple.prototype, "focused", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Ripple.prototype, "pressed", void 0);
+//# sourceMappingURL=ripple.js.map

package/ripple/lib/ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {createAnimationSignal, Easing} from '@material/web/motion/animation.js';\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nconst PRESS_GROW_MS = 450;\nconst MINIMUM_PRESS_MS = 225;\nconst INITIAL_ORIGIN_SCALE = 0.2;\nconst PADDING = 10;\nconst SOFT_EDGE_MINIMUM_SIZE = 75;\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35;\nconst PRESS_PSEUDO = '::after';\nconst ANIMATION_FILL = 'forwards';\n\n/** @soyCompatible */\nexport class Ripple extends LitElement {\n  @query('.md3-ripple-surface') mdRoot!: HTMLElement;\n\n  @property({type: Boolean}) unbounded = false;\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  @state() protected hovered = false;\n  @state() protected focused = false;\n  @state() protected pressed = false;\n\n  protected rippleSize = '';\n  protected rippleScale = '';\n  protected initialSize = 0;\n  protected pressAnimationSignal = createAnimationSignal();\n  protected growAnimation: Animation|null = null;\n  protected delayedEndPressHandle: number|null = null;\n\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    return html`<div class=\"md3-ripple-surface ${\n        classMap(this.getRenderRippleClasses())}\"></div>`;\n  }\n\n  /** @soyTemplate */\n  protected getRenderRippleClasses(): ClassInfo {\n    return {\n      'md3-ripple--hovered': this.hovered,\n      'md3-ripple--focused': this.focused,\n      'md3-ripple--pressed': this.pressed,\n      'md3-ripple--unbounded': this.unbounded,\n    };\n  }\n\n  protected override update(changedProps: PropertyValues<this>) {\n    if (changedProps.has('disabled') && this.disabled) {\n      this.endHover();\n      this.endFocus();\n      this.endPress();\n    }\n    super.update(changedProps);\n  }\n\n  protected getDimensions() {\n    return (this.parentElement ?? this).getBoundingClientRect();\n  }\n\n  protected determineRippleSize() {\n    const {height, width} = this.getDimensions();\n    const maxDim = Math.max(height, width);\n    const softEdgeSize =\n        Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);\n\n\n    let maxRadius = maxDim;\n    let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);\n\n    const hypotenuse = Math.sqrt(width ** 2 + height ** 2);\n    maxRadius = hypotenuse + PADDING;\n\n    // ensure `initialSize` is even for unbounded\n    if (this.unbounded) {\n      initialSize = initialSize - (initialSize % 2);\n    }\n\n    this.initialSize = initialSize;\n    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`;\n    this.rippleSize = `${this.initialSize}px`;\n  }\n\n  protected getNormalizedPointerEventCoords(pointerEvent: PointerEvent):\n      {x: number, y: number} {\n    const {scrollX, scrollY} = window;\n    const {left, top} = this.getDimensions();\n    const documentX = scrollX + left;\n    const documentY = scrollY + top;\n    const {pageX, pageY} = pointerEvent;\n    return {x: pageX - documentX, y: pageY - documentY};\n  }\n\n  protected getTranslationCoordinates(positionEvent?: Event|null) {\n    const {height, width} = this.getDimensions();\n    // end in the center\n    const endPoint = {\n      x: (width - this.initialSize) / 2,\n      y: (height - this.initialSize) / 2,\n    };\n\n    let startPoint;\n    if (positionEvent instanceof PointerEvent) {\n      startPoint = this.getNormalizedPointerEventCoords(positionEvent);\n    } else {\n      startPoint = {\n        x: width / 2,\n        y: height / 2,\n      };\n    }\n\n    // center around start point\n    startPoint = {\n      x: startPoint.x - (this.initialSize / 2),\n      y: startPoint.y - (this.initialSize / 2),\n    };\n\n    return {startPoint, endPoint};\n  }\n\n  protected startPressAnimation(positionEvent?: Event|null) {\n    this.determineRippleSize();\n    const {startPoint, endPoint} =\n        this.getTranslationCoordinates(positionEvent);\n    const translateStart = `${startPoint.x}px, ${startPoint.y}px`;\n    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;\n\n    const signal = this.pressAnimationSignal.start();\n\n    const growAnimation = this.mdRoot.animate(\n        {\n          top: [0, 0],\n          left: [0, 0],\n          height: [this.rippleSize, this.rippleSize],\n          width: [this.rippleSize, this.rippleSize],\n          transform: [\n            `translate(${translateStart}) scale(1)`,\n            `translate(${translateEnd}) scale(${this.rippleScale})`\n          ],\n        },\n        {\n          pseudoElement: PRESS_PSEUDO,\n          duration: PRESS_GROW_MS,\n          easing: Easing.STANDARD,\n          fill: ANIMATION_FILL\n        });\n\n    growAnimation.addEventListener('finish', () => {\n      this.pressAnimationSignal.finish();\n      this.growAnimation = null;\n    });\n\n    signal.addEventListener('abort', () => {\n      growAnimation.cancel();\n      this.growAnimation = null;\n    });\n\n    this.growAnimation = growAnimation;\n  }\n\n  /**\n   * @deprecated Use beginHover\n   */\n  startHover(hoverEvent?: Event) {\n    this.beginHover(hoverEvent);\n  }\n\n  beginHover(hoverEvent?: Event) {\n    if ((hoverEvent as PointerEvent)?.pointerType !== 'touch') {\n      this.hovered = true;\n    }\n  }\n\n  endHover() {\n    this.hovered = false;\n  }\n\n  /**\n   * @deprecated Use beginFocus\n   */\n  startFocus() {\n    this.beginFocus();\n  }\n\n  beginFocus() {\n    this.focused = true;\n  }\n\n  endFocus() {\n    this.focused = false;\n  }\n\n  /**\n   * @deprecated Use beginPress\n   */\n  startPress(positionEvent?: Event|null) {\n    this.beginPress(positionEvent);\n  }\n\n  beginPress(positionEvent?: Event|null) {\n    this.pressed = true;\n    if (this.delayedEndPressHandle !== null) {\n      clearTimeout(this.delayedEndPressHandle);\n      this.delayedEndPressHandle = null;\n    }\n    this.startPressAnimation(positionEvent);\n  }\n\n  endPress() {\n    const pressAnimationPlayState = this.growAnimation?.currentTime ?? Infinity;\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false;\n    } else {\n      this.delayedEndPressHandle = setTimeout(() => {\n        this.pressed = false;\n        this.delayedEndPressHandle = null;\n      }, MINIMUM_PRESS_MS - pressAnimationPlayState);\n    }\n  }\n}\n"]}

package/ripple/ripple.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Ripple } from './lib/ripple.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-ripple': MdRipple;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdRipple extends Ripple {
+    static styles: import("lit").CSSResult[];
+}

package/ripple/ripple.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Ripple } from './lib/ripple.js';
+import { styles } from './lib/ripple-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdRipple = class MdRipple extends Ripple {
+};
+MdRipple.styles = [styles];
+MdRipple = __decorate([
+    customElement('md-ripple')
+], MdRipple);
+export { MdRipple };
+//# sourceMappingURL=ripple.js.map

package/ripple/ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAQlD;;;;GAIG;AAEH,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,MAAM;CAEnC,CAAA;AADiB,eAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Ripple} from './lib/ripple.js';\nimport {styles} from './lib/ripple-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-ripple': MdRipple;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-ripple')\nexport class MdRipple extends Ripple {\n  static override styles = [styles];\n}"]}

package/sass/_assert.scss

@@ -0,0 +1,16 @@
+@use 'sass:meta';
+
+///
+/// is-type returns the given value if it matches the given type. If not, it
+/// throws an error.
+/// @param {*} $val - the value to check the type of.
+/// @param {String} $type - the type we expect $val to be.
+/// @return {*} returns $val assuming it is of type $type.
+///
+@function is-type($val, $type) {
+  $actual: meta.type-of($val);
+  @if $actual != $type {
+    @error 'expected "#{$val}" to be of type "#{$type}"; was type "#{$actual}"';
+  }
+  @return $val;
+}

package/sass/_color.scss

@@ -0,0 +1,186 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use './assert';
+@use './string-ext';
+@use './var';
+
+$_hex: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 'a' 'b' 'c' 'd' 'e' 'f';
+
+///
+/// @example - scss
+///   @debug color-var-hex-to-rgba(var(--foo-color-on-surface, #8ab4f8), 0.38);
+///   // rgb(var(--foo-color-on-surface-rgb, 138, 180, 248), 0.38))
+/// @param {String} $var - CSS custom property string in var(--foo, #hex) format.
+/// @param {Number} $opacity - Opacity to mix with given color.
+/// @return {String} Returns color string in rgb() format containing
+///     CSS custom property for comma separated rgb color.
+@function color-var-hex-to-rgba($var, $opacity) {
+  @if not var.is-var($var) {
+    @error '"#{$var}" is not a valid custom property.';
+  }
+
+  @if meta.type-of($opacity) != 'number' {
+    @error '"#{$opacity}" is not a valid number. Expecting to combine it with "#{$var}"';
+  }
+
+  $fallback: var.fallback($var);
+  // var(--foo-color-rgb, 31,31,31)
+  $var-rgb: var.create('#{var.name($var)}-rgb', hex-to-rgb($fallback));
+  @return string.unquote('rgb(#{$var-rgb}, #{$opacity})');
+}
+
+/// @example - scss
+///   @debug hex-to-rgb('#8ab4f8'); // 138, 180, 248
+/// @param {String} $string - CSS hex color in string format including '#'.
+/// @return {String} Returns comma separated rgb values in string format.
+@function hex-to-rgb($string) {
+  @if not string-ext.has-prefix($string, '#') {
+    @error '#{$string} is not in CSS hex color format.';
+  }
+
+  $string-lower: string.to-lower-case($string);
+  $r: '';
+  $g: '';
+  $b: '';
+  $length: string.length($string);
+  $max: if($length == 4, 1, 2);
+
+  // Check for length accuracy
+  @if $length != 4 and $length != 7 {
+    @return $string;
+  }
+
+  // Loop from the second character (omitting #)
+  @for $i from 2 through $length {
+    $c: string.slice($string-lower, $i, $i);
+
+    // If wrong character, return
+    @if list.index($_hex, $c) == null {
+      @return $string;
+    }
+
+    @if string.length($r) < $max {
+      $r: $r + $c;
+    } @else if string.length($g) < $max {
+      $g: $g + $c;
+    } @else if string.length($b) < $max {
+      $b: $b + $c;
+    }
+  }
+
+  @if $length == 4 {
+    $r: $r + $r;
+    $g: $g + $g;
+    $b: $b + $b;
+  }
+
+  @return #{_hex-to-dec($r), _hex-to-dec($g), _hex-to-dec($b)};
+}
+
+///
+/// replace-as-rgba returns a map with the color key transformed to an RGBA
+/// color value created by joining the color key value with the opacity key
+/// value. The opacity key is removed from the map. This function is
+/// non-destructive and returns a new instance of the given map. It should only
+/// be used for disabled colors.
+///
+/// If $color is a var string then we would convert the color value to comma
+/// separated rgb value.
+///
+/// @example
+///.  replace-as-rgba((
+///     foo: red,
+///.    bar: 0.5
+///.  ), foo, bar) = (foo: rgba(255, 0, 0, 0.5))
+/// @example
+///.  replace-as-rgba((
+///     foo: var(--foo-color, #8ab4f8),
+///.    bar: 0.5
+///.  ), foo, bar) = (foo: rgb(var(--foo-color-rgb, 138, 180, 248), 0.5))
+///
+/// @param {Map} $map - the map with the given keys.
+/// @param {String} $color-key - the color key in the map.
+/// @param {String} $opacity-key - the opacity key in the map.
+/// @return {Map} The map with the color key replaced by an RGBA representation.
+@function replace-as-rgba($map, $color-key, $opacity-key) {
+  // Make a non-destructive copy of the map.
+  $out: map.merge($map, ());
+
+  $color: map.get($out, $color-key);
+  @if var.is-var($color) {
+    // TODO(b/213331407): Convert color from hex to rgba CSS color format to
+    // enable mixing rgb value with alpha using custom properties.
+    // (e.g., rgb(var(--foo-sys-color-on-surface-rgb, 31,31,31), 0.38))
+    // Remove once the attached bug is resolved.
+    $color: color-var-hex-to-rgba($color, map.get($out, $opacity-key));
+  } @else if meta.type-of($color) == 'color' {
+    $opacity: assert.is-type(map.get($out, $opacity-key), 'number');
+    $color: rgba($color, $opacity);
+  }
+
+  $out: map.set($out, $color-key, $color);
+  @return $out;
+}
+
+///
+/// join-color-and-opacity-pairs returns a map with all given color and opacity
+/// keys joined to create an RGBA color value. This function is non-destructive
+/// and returns a new instance of the given map. It should only be used for
+/// disabled colors.
+///
+/// @example
+///   join-color-and-opacity-pairs((
+///     foo-color: red,
+///     foo-opacity: 0.2,
+///     bar-color: green,
+///     bar-opacity: 0.3,
+///   ), (
+///     (color-key: 'foo-color', opacity-key: 'foo-opacity'),
+///     (color-key: 'bar-color', opacity-key: 'bar-opacity'),
+///   )) = (foo-color: rgba(255, 0, 0, 0.2), bar-color: rgba(0, 255, 0, 0.3))
+///
+/// @param {Map} $map - the map with the values to modify.
+/// @param {List<Map>} $color-opacity-key-pairs - the list of color/opacity key
+///   pairs to join on the list.
+/// @return {$Map} The map with the given color/opacity key pairs replaced by
+///   RGBA representations.
+///
+@function join-color-and-opacity-pairs($map, $color-opacity-key-pairs) {
+  // Make a non-destructive copy of the map.
+  $out: map.merge($map, ());
+  @each $pair in $color-opacity-key-pairs {
+    $color-key: map.get($pair, color-key);
+    $opacity-key: map.get($pair, opacity-key);
+    $has-keys: map.has-key($out, $color-key) and
+      map.has-key($out, $opacity-key);
+    @if $has-keys {
+      $out: replace-as-rgba($out, $color-key, $opacity-key);
+    }
+  }
+  @return $out;
+}
+
+/// @example - scss
+///   @debug _hex-to-dec('f8'); // 248
+/// @param {String} $string - Hex number in string format.
+/// @return {Number} Returns decimal number for given hex number.
+@function _hex-to-dec($string) {
+  $string: string.to-lower-case($string);
+  $length: string.length($string);
+
+  $dec: 0;
+  @for $i from 1 through $length {
+    $factor: 1 + (15 * ($length - $i));
+    $index: list.index($_hex, string.slice($string, $i, $i));
+    $dec: $dec + $factor * ($index - 1);
+  }
+
+  @return $dec;
+}

package/sass/_dom.scss

@@ -0,0 +1,52 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+///
+/// Emits necessary layout styles to set a transparent border around an element
+/// without interfering with the rest of its component layout. The border is
+/// only visible in high-contrast mode. The target element should be a child of
+/// a relatively positioned top-level element (i.e. a ::before pseudo-element).
+///
+/// @param {number} $border-width - The width of the transparent border.
+/// @param {string} $border-style - The style of the transparent border.
+///
+@mixin transparent-border($border-width: 1px, $border-style: solid) {
+  position: absolute;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border: $border-width $border-style transparent;
+  border-radius: inherit;
+  content: '';
+  pointer-events: none;
+}
+
+///
+/// Visually hides text content for accessibility. This text should only be
+/// visible to screen reader users.
+/// See https://a11yproject.com/posts/how-to-hide-content/
+///
+@mixin visually-hidden() {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap; /* added line */
+  width: 1px;
+}
+
+///
+/// While in `forced-colors` mode, only system colors should be used.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#system_colors
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
+/// @content styles to emit in `forced-colors` mode
+@mixin forced-colors-mode() {
+  @media screen and (forced-colors: active) {
+    @content;
+  }
+}