Replace resize observer with CSS container queries

[blackfalcon]

Is your feature request related to a problem? Please describe.

The following code is part of a bootstrap solution to support container queries before CSS container queries were broadly available.

auro-flightline/src/auro-flightline.js

Lines 26 to 42 in 63ed29d

	constructor() {
	super();
	this.canceled = false;
	this.cq = defaultContainerWidth;
	/** @private */
	this.showAllStops = false;
	/** @private */
	this.hasCanceledSegment = false;
	/** @private */
	this.firstSegmentCanceled = false;
	/** @private */
	this.lastSegmentCanceled = false;
	}

The current issue is that the following tests are failing for unknown reasons.

auro-flightline/test/auro-flightline.test.js

Lines 57 to 80 in 63ed29d

	it('shows all stops depending on width', async () => {
	const el = await fixture(html`
	<auro-flightline id="condensed">
	<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
	<auro-flight-segment iata="BOS" duration="1h 40m"></auro-flight-segment>
	<auro-flight-segment iata="DUB" duration="13h 40m"></auro-flight-segment>
	</auro-flightline>
	`);
	const slottedSegment = el.querySelector('auro-flight-segment');
	const summarySegment = el.shadowRoot.querySelector('auro-flight-segment');
	// when too narrow to show all segments, the condensed segment is shwon
	el.style.width = "100px";
	await waitUntil(() => !el.showAllStops);
	expect(window.getComputedStyle(slottedSegment).display).to.eql('none');
	expect(window.getComputedStyle(summarySegment).display).to.eql('block');
	// when the element is resized, the expanded view is shown
	el.style.width = "700px";
	await waitUntil(() => el.showAllStops);
	expect(window.getComputedStyle(slottedSegment).display).to.eql('block');
	expect(window.getComputedStyle(summarySegment).display).to.eql('none');
	});

Describe the solution you'd like

Instead of updating code/tests it is preferred that we remove the bootstrap code and update the component to use CSS container queries that are easily supported by the browser. This solution will remove the maintenance and testing dependency related to supporting the bootstrap solution.

https://caniuse.com/css-container-queries

https://mxb.dev/blog/container-queries-web-components/

This will be a BREAKING CHANGE in regards to the cq attribute will no longer be supported. This work should be addressed with the current efforts to re-release the component under the @aurodesignsystem npm namespace.

Describe alternatives you've considered

Trying to fix the code/tests.

Exit criteria

This issue will be considered complete once the resize observer code has been removed from the project and the currently supported feature (see attached screenshot) is still supported without any changes needed by the consumers.