@m3e/web 2.0.4 → 2.0.5

package/dist/switch.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.min.js","sources":["../../../node_modules/tslib/tslib.es6.js","../../src/switch/styles/SwitchToken.ts","../../src/switch/styles/SwitchHandleStyle.ts","../../src/switch/styles/SwitchIconStyle.ts","../../src/switch/styles/SwitchStateLayerStyle.ts","../../src/switch/styles/SwitchStyle.ts","../../src/switch/styles/SwitchTrackStyle.ts","../../src/switch/SwitchElement.ts"],"sourcesContent":["/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\r\n\r\nvar extendStatics = function(d, b) {\r\n    extendStatics = Object.setPrototypeOf ||\r\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n    return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n    if (typeof b !== \"function\" && b !== null)\r\n        throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n    extendStatics(d, b);\r\n    function __() { this.constructor = d; }\r\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n    __assign = Object.assign || function __assign(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n        }\r\n        return t;\r\n    }\r\n    return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n                t[p[i]] = s[p[i]];\r\n        }\r\n    return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n    return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\r\n    function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\r\n    var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\r\n    var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\r\n    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\r\n    var _, done = false;\r\n    for (var i = decorators.length - 1; i >= 0; i--) {\r\n        var context = {};\r\n        for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\r\n        for (var p in contextIn.access) context.access[p] = contextIn.access[p];\r\n        context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\r\n        var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\r\n        if (kind === \"accessor\") {\r\n            if (result === void 0) continue;\r\n            if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\r\n            if (_ = accept(result.get)) descriptor.get = _;\r\n            if (_ = accept(result.set)) descriptor.set = _;\r\n            if (_ = accept(result.init)) initializers.unshift(_);\r\n        }\r\n        else if (_ = accept(result)) {\r\n            if (kind === \"field\") initializers.unshift(_);\r\n            else descriptor[key] = _;\r\n        }\r\n    }\r\n    if (target) Object.defineProperty(target, contextIn.name, descriptor);\r\n    done = true;\r\n};\r\n\r\nexport function __runInitializers(thisArg, initializers, value) {\r\n    var useValue = arguments.length > 2;\r\n    for (var i = 0; i < initializers.length; i++) {\r\n        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\r\n    }\r\n    return useValue ? value : void 0;\r\n};\r\n\r\nexport function __propKey(x) {\r\n    return typeof x === \"symbol\" ? x : \"\".concat(x);\r\n};\r\n\r\nexport function __setFunctionName(f, name, prefix) {\r\n    if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\r\n    return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\r\n};\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n    if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n    return new (P || (P = Promise))(function (resolve, reject) {\r\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n    });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\r\n    return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n    function verb(n) { return function (v) { return step([n, v]); }; }\r\n    function step(op) {\r\n        if (f) throw new TypeError(\"Generator is already executing.\");\r\n        while (g && (g = 0, op[0] && (_ = 0)), _) try {\r\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n            if (y = 0, t) op = [op[0] & 2, t.value];\r\n            switch (op[0]) {\r\n                case 0: case 1: t = op; break;\r\n                case 4: _.label++; return { value: op[1], done: false };\r\n                case 5: _.label++; y = op[1]; op = [0]; continue;\r\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n                default:\r\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n                    if (t[2]) _.ops.pop();\r\n                    _.trys.pop(); continue;\r\n            }\r\n            op = body.call(thisArg, _);\r\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n    }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    var desc = Object.getOwnPropertyDescriptor(m, k);\r\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\r\n        desc = { enumerable: true, get: function() { return m[k]; } };\r\n    }\r\n    Object.defineProperty(o, k2, desc);\r\n}) : (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n    var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n    if (m) return m.call(o);\r\n    if (o && typeof o.length === \"number\") return {\r\n        next: function () {\r\n            if (o && i >= o.length) o = void 0;\r\n            return { value: o && o[i++], done: !o };\r\n        }\r\n    };\r\n    throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n    if (!m) return o;\r\n    var i = m.call(o), r, ar = [], e;\r\n    try {\r\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n    }\r\n    catch (error) { e = { error: error }; }\r\n    finally {\r\n        try {\r\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n        }\r\n        finally { if (e) throw e.error; }\r\n    }\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n    for (var ar = [], i = 0; i < arguments.length; i++)\r\n        ar = ar.concat(__read(arguments[i]));\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n    for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n            r[k] = a[j];\r\n    return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n        if (ar || !(i in from)) {\r\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n            ar[i] = from[i];\r\n        }\r\n    }\r\n    return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n    return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n    return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n    function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\r\n    function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\r\n    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n    function fulfill(value) { resume(\"next\", value); }\r\n    function reject(value) { resume(\"throw\", value); }\r\n    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n    var i, p;\r\n    return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var m = o[Symbol.asyncIterator], i;\r\n    return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n    if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n    return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n    o[\"default\"] = v;\r\n};\r\n\r\nvar ownKeys = function(o) {\r\n    ownKeys = Object.getOwnPropertyNames || function (o) {\r\n        var ar = [];\r\n        for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\r\n        return ar;\r\n    };\r\n    return ownKeys(o);\r\n};\r\n\r\nexport function __importStar(mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\r\n    __setModuleDefault(result, mod);\r\n    return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n    return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n    return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n    if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n    return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n\r\nexport function __classPrivateFieldIn(state, receiver) {\r\n    if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\r\n    return typeof state === \"function\" ? receiver === state : state.has(receiver);\r\n}\r\n\r\nexport function __addDisposableResource(env, value, async) {\r\n    if (value !== null && value !== void 0) {\r\n        if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\r\n        var dispose, inner;\r\n        if (async) {\r\n            if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\r\n            dispose = value[Symbol.asyncDispose];\r\n        }\r\n        if (dispose === void 0) {\r\n            if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\r\n            dispose = value[Symbol.dispose];\r\n            if (async) inner = dispose;\r\n        }\r\n        if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\r\n        if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\r\n        env.stack.push({ value: value, dispose: dispose, async: async });\r\n    }\r\n    else if (async) {\r\n        env.stack.push({ async: true });\r\n    }\r\n    return value;\r\n\r\n}\r\n\r\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\r\n    var e = new Error(message);\r\n    return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\r\n};\r\n\r\nexport function __disposeResources(env) {\r\n    function fail(e) {\r\n        env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\r\n        env.hasError = true;\r\n    }\r\n    var r, s = 0;\r\n    function next() {\r\n        while (r = env.stack.pop()) {\r\n            try {\r\n                if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\r\n                if (r.dispose) {\r\n                    var result = r.dispose.call(r.value);\r\n                    if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\r\n                }\r\n                else s |= 1;\r\n            }\r\n            catch (e) {\r\n                fail(e);\r\n            }\r\n        }\r\n        if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\r\n        if (env.hasError) throw env.error;\r\n    }\r\n    return next();\r\n}\r\n\r\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\r\n    if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\r\n        return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\r\n            return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\r\n        });\r\n    }\r\n    return path;\r\n}\r\n\r\nexport default {\r\n    __extends: __extends,\r\n    __assign: __assign,\r\n    __rest: __rest,\r\n    __decorate: __decorate,\r\n    __param: __param,\r\n    __esDecorate: __esDecorate,\r\n    __runInitializers: __runInitializers,\r\n    __propKey: __propKey,\r\n    __setFunctionName: __setFunctionName,\r\n    __metadata: __metadata,\r\n    __awaiter: __awaiter,\r\n    __generator: __generator,\r\n    __createBinding: __createBinding,\r\n    __exportStar: __exportStar,\r\n    __values: __values,\r\n    __read: __read,\r\n    __spread: __spread,\r\n    __spreadArrays: __spreadArrays,\r\n    __spreadArray: __spreadArray,\r\n    __await: __await,\r\n    __asyncGenerator: __asyncGenerator,\r\n    __asyncDelegator: __asyncDelegator,\r\n    __asyncValues: __asyncValues,\r\n    __makeTemplateObject: __makeTemplateObject,\r\n    __importStar: __importStar,\r\n    __importDefault: __importDefault,\r\n    __classPrivateFieldGet: __classPrivateFieldGet,\r\n    __classPrivateFieldSet: __classPrivateFieldSet,\r\n    __classPrivateFieldIn: __classPrivateFieldIn,\r\n    __addDisposableResource: __addDisposableResource,\r\n    __disposeResources: __disposeResources,\r\n    __rewriteRelativeImportExtension: __rewriteRelativeImportExtension,\r\n};\r\n","import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens that control `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchToken = {\r\n  selectedIconColor: unsafeCSS(`var(--m3e-switch-selected-icon-color, ${DesignToken.color.onPrimaryContainer})`),\r\n  selectedIconSize: unsafeCSS(\"var(--m3e-switch-selected-icon-size, 1rem)\"),\r\n  unselectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedIconSize: unsafeCSS(\"var(--m3e-switch-unselected-icon-size, 1rem)\"),\r\n  trackHeight: unsafeCSS(\"var(--m3e-switch-track-height, 2rem)\"),\r\n  trackWidth: unsafeCSS(\"var(--m3e-switch-track-width, 3.25rem)\"),\r\n  trackOutlineColor: unsafeCSS(`var(--m3e-switch-track-outline-color, ${DesignToken.color.outline})`),\r\n  trackOutlineWidth: unsafeCSS(\"var(--m3e-switch-track-outline-width, 2px)\"),\r\n  trackShape: unsafeCSS(`var(--m3e-switch-track-shape, ${DesignToken.shape.corner.full})`),\r\n  selectedTrackColor: unsafeCSS(`var(--m3e-switch-selected-track-color, ${DesignToken.color.primary})`),\r\n  unselectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHandleHeight: unsafeCSS(\"var(--m3e-switch-unselected-handle-height, 1rem)\"),\r\n  unselectedHandleWidth: unsafeCSS(\"var(--m3e-switch-unselected-handle-width, 1rem)\"),\r\n  withIconHandleHeight: unsafeCSS(\"var(--m3e-switch-with-icon-handle-height, 1.5rem)\"),\r\n  withIconHandleWidth: unsafeCSS(\"var(--m3e-switch-with-icon-handle-width, 1.5rem)\"),\r\n  selectedHandleHeight: unsafeCSS(\"var(--m3e-switch-selected-handle-height, 1.5rem)\"),\r\n  selectedHandleWidth: unsafeCSS(\"var(--m3e-switch-selected-handle-width, 1.5rem)\"),\r\n  pressedHandleHeight: unsafeCSS(\"var(--m3e-switch-pressed-handle-height, 1.75rem)\"),\r\n  pressedHandleWidth: unsafeCSS(\"var(--m3e-switch-pressed-handle-width, 1.75rem)\"),\r\n  handleShape: unsafeCSS(`var(--m3e-switch-handle-shape, ${DesignToken.shape.corner.full})`),\r\n  selectedHandleColor: unsafeCSS(`var(--m3e-switch-selected-handle-color, ${DesignToken.color.onPrimary})`),\r\n  unselectedHandleColor: unsafeCSS(`var(--m3e-switch-unselected-handle-color, ${DesignToken.color.outline})`),\r\n  stateLayerSize: unsafeCSS(\"var(--m3e-switch-state-layer-size, 2.5rem)\"),\r\n  stateLayerShape: unsafeCSS(`var(--m3e-switch-state-layer-shape, ${DesignToken.shape.corner.full})`),\r\n  disabledSelectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-icon-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledSelectedIconOpacity: unsafeCSS(\"var(--m3e-switch-disabled-selected-icon-opacity, 38%)\"),\r\n  disabledUnselectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  disabledUnselectedIconOpacity: unsafeCSS(\"var(--m3e-switch-disabled-unselected-icon-opacity, 38%)\"),\r\n  disabledTrackOpacity: unsafeCSS(\"var(--m3e-switch-disabled-track-opacity, 12%)\"),\r\n  disabledSelectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-track-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledUnselectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  disabledUnselectedTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-track-outline-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledUnselectedHandleOpacity: unsafeCSS(\"var(--m3e-switch-disabled-unselected-handle-opacity, 38%)\"),\r\n  disabledSelectedHandleOpacity: unsafeCSS(\"var(--m3e-switch-disabled-selected-handle-opacity, 100%)\"),\r\n  disabledSelectedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-handle-color, ${DesignToken.color.surface})`,\r\n  ),\r\n  disabledUnselectedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-handle-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  selectedHoverIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedHoverIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedHoverTrackColor: unsafeCSS(`var(--m3e-switch-selected-hover-track-color, ${DesignToken.color.primary})`),\r\n  selectedHoverStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedHoverStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-hover-state-layer-opacity, 8%)\"),\r\n  unselectedHoverTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHoverTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedHoverStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedHoverStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-hover-state-layer-opacity, 8%)\"),\r\n  selectedHoverHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-handle-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHoverHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n  selectedFocusIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedFocusIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedFocusTrackColor: unsafeCSS(`var(--m3e-switch-selected-focus-track-color, ${DesignToken.color.primary})`),\r\n  selectedFocusStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedFocusStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-focus-state-layer-opacity, 10%)\"),\r\n  unselectedFocusTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedFocusTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedFocusStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedFocusStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-focus-state-layer-opacity, 10%)\"),\r\n  selectedFocusHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-handle-color, ${DesignToken.color.primaryContainer})`,\r\n  ),\r\n  unselectedFocusHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n  selectedPressedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedPressedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedPressedTrackColor: unsafeCSS(`var(--m3e-switch-selected-pressed-track-color, ${DesignToken.color.primary})`),\r\n  selectedPressedStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedPressedStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-pressed-state-layer-opacity, 10%)\"),\r\n  unselectedPressedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedPressedTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedPressedStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedPressedStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-pressed-state-layer-opacity, 10%)\"),\r\n  selectedPressedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-handle-color, ${DesignToken.color.primaryContainer})`,\r\n  ),\r\n  unselectedPressedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Handle styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchHandleStyle = css`\r\n  .handle {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    pointer-events: none;\r\n    transform-origin: center center;\r\n    border-radius: ${SwitchToken.handleShape};\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n      transform var(--_switch-handle-effect),\r\n      width ${DesignToken.motion.spring.fastEffects},\r\n      height ${DesignToken.motion.spring.fastEffects}`,\r\n    )};\r\n  }\r\n  .track:not(.pressed) .handle {\r\n    --_switch-handle-effect: ${DesignToken.motion.spring.fastSpatial};\r\n  }\r\n  .track.pressed .handle {\r\n    --_switch-handle-effect: ${DesignToken.motion.spring.fastEffects};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    width: ${SwitchToken.withIconHandleWidth};\r\n    height: ${SwitchToken.withIconHandleHeight};\r\n  }\r\n  :host(:not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n    width: ${SwitchToken.unselectedHandleWidth};\r\n    height: ${SwitchToken.unselectedHandleHeight};\r\n  }\r\n  :host([checked]) .track:not(.pressed) .handle {\r\n    width: ${SwitchToken.selectedHandleWidth};\r\n    height: ${SwitchToken.selectedHandleHeight};\r\n  }\r\n  .track.pressed .handle {\r\n    width: ${SwitchToken.pressedHandleWidth};\r\n    height: ${SwitchToken.pressedHandleHeight};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedHoverHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedFocusHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .handle {\r\n    background-color: ${SwitchToken.unselectedPressedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedHoverHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedFocusHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .handle {\r\n    background-color: ${SwitchToken.selectedPressedHandleColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedHandleColor} ${SwitchToken.disabledUnselectedHandleOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .handle {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedHandleColor} ${SwitchToken.disabledSelectedHandleOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl))[checked]) .track:not(.pressed) .handle {\r\n    transform: translateX(\r\n      calc(${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - calc(${SwitchToken.trackOutlineWidth} * 2))\r\n    );\r\n  }\r\n  :host(:dir(rtl)[checked]) .track:not(.pressed) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        0px - calc(\r\n            ${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - calc(${SwitchToken.trackOutlineWidth} * 2)\r\n          )\r\n      )\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl))[checked]) .track.pressed .handle {\r\n    transform: translateX(\r\n      calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth})\r\n    );\r\n  }\r\n  :host(:dir(rtl)[checked]) .track.pressed .handle {\r\n    transform: translateX(\r\n      calc(0px - calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth}))\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl)):not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host(:not(:dir(rtl))[aria-disabled=\"true\"]:not([checked])) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        ${SwitchToken.trackOutlineWidth} + calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})\r\n      )\r\n    );\r\n  }\r\n  :host(:dir(rtl):not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host(:dir(rtl)[aria-disabled=\"true\"]:not([checked])) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        0px - calc(\r\n            ${SwitchToken.trackOutlineWidth} +\r\n              calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})\r\n          )\r\n      )\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl)):not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    transform: translateX(${SwitchToken.trackOutlineWidth});\r\n  }\r\n  :host(:dir(rtl):not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    transform: translateX(calc(0px - ${SwitchToken.trackOutlineWidth}));\r\n  }\r\n  @media (forced-colors: active) {\r\n    .handle {\r\n      transition: ${unsafeCSS(\r\n        `transform var(--_switch-handle-effect),\r\n      width ${DesignToken.motion.spring.fastEffects},\r\n      height ${DesignToken.motion.spring.fastEffects}`,\r\n      )};\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .handle {\r\n      background-color: ButtonText;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n      background-color: GrayText;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .handle {\r\n      background-color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .handle {\r\n      background-color: Canvas;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .handle {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Icon styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchIconStyle = css`\r\n  :host([icons=\"none\"]) .icon,\r\n  :host([icons=\"selected\"]:not([checked])) .icon,\r\n  :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n    display: none;\r\n  }\r\n  .icon {\r\n    width: 1em;\r\n    transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:not([checked])) .icon {\r\n    font-size: ${SwitchToken.unselectedIconSize};\r\n  }\r\n  :host([checked]) .icon {\r\n    font-size: ${SwitchToken.selectedIconSize};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedHoverIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedFocusIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .icon {\r\n    color: ${SwitchToken.unselectedPressedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedHoverIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedFocusIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .icon {\r\n    color: ${SwitchToken.selectedPressedIconColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedIconColor} ${SwitchToken.disabledUnselectedIconOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .icon {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedIconColor} ${SwitchToken.disabledSelectedIconOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  @media (forced-colors: active) {\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .icon {\r\n      color: Canvas;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .icon {\r\n      color: CanvasText;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n      color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .icon {\r\n      color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .icon {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * State layer styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchStateLayerStyle = css`\r\n  .state-layer {\r\n    width: ${SwitchToken.stateLayerSize};\r\n    height: ${SwitchToken.stateLayerSize};\r\n    border-radius: ${SwitchToken.stateLayerShape};\r\n    transition: ${unsafeCSS(\r\n      `top ${DesignToken.motion.spring.fastEffects},\r\n          left ${DesignToken.motion.spring.fastEffects},\r\n          right ${DesignToken.motion.spring.fastEffects}`,\r\n    )};\r\n  }\r\n  :host(:not([checked])[icons=\"both\"]) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleHeight}) / 2));\r\n  }\r\n  :host(:not([checked]):not([icons=\"both\"])) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(\r\n      0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleWidth}) / 2)\r\n    );\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleHeight}) / 2));\r\n  }\r\n  :host([checked]) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleHeight}) / 2));\r\n  }\r\n  .track.pressed .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));\r\n  }\r\n  :host(:not([checked])) .state-layer {\r\n    --m3e-state-layer-hover-color: ${SwitchToken.unselectedHoverStateLayerColor};\r\n    --m3e-state-layer-hover-opacity: ${SwitchToken.unselectedHoverStateLayerOpacity};\r\n    --m3e-state-layer-focus-color: ${SwitchToken.unselectedFocusStateLayerColor};\r\n    --m3e-state-layer-focus-opacity: ${SwitchToken.unselectedFocusStateLayerOpacity};\r\n  }\r\n  :host([checked]) .state-layer {\r\n    --m3e-state-layer-hover-color: ${SwitchToken.selectedHoverStateLayerColor};\r\n    --m3e-state-layer-hover-opacity: ${SwitchToken.selectedHoverStateLayerOpacity};\r\n    --m3e-state-layer-focus-color: ${SwitchToken.selectedFocusStateLayerColor};\r\n    --m3e-state-layer-focus-opacity: ${SwitchToken.selectedFocusStateLayerOpacity};\r\n  }\r\n`;\r\n","import { css } from \"lit\";\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Baseline styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchStyle = css`\r\n  :host {\r\n    display: inline-block;\r\n    position: relative;\r\n    outline: none;\r\n    height: fit-content;\r\n    width: fit-content;\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])) {\r\n    cursor: pointer;\r\n  }\r\n  .focus-ring {\r\n    border-radius: ${SwitchToken.trackShape};\r\n  }\r\n  .touch {\r\n    position: absolute;\r\n    height: 3rem;\r\n    left: 0;\r\n    right: 0;\r\n  }\r\n  .base {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Track styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchTrackStyle = css`\r\n  .track {\r\n    display: flex;\r\n    align-items: center;\r\n    position: relative;\r\n    box-sizing: border-box;\r\n    border-radius: ${SwitchToken.trackShape};\r\n    width: ${SwitchToken.trackWidth};\r\n    height: ${SwitchToken.trackHeight};\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n    )};\r\n  }\r\n  :host(:not([checked])) .track {\r\n    border-width: ${SwitchToken.trackOutlineWidth};\r\n    border-style: solid;\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.trackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.unselectedHoverTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedHoverTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.unselectedFocusTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedFocusTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed {\r\n    border-color: ${SwitchToken.unselectedPressedTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedPressedTrackColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .track {\r\n    border-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedTrackOutlineColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedTrackColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedHoverTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedFocusTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed {\r\n    background-color: ${SwitchToken.selectedPressedTrackColor};\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .track {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedTrackColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  @media (forced-colors: active) {\r\n    .track {\r\n      transition: none;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed {\r\n      border-color: ButtonText;\r\n      background-color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .track {\r\n      border-color: GrayText;\r\n      background-color: Canvas;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed {\r\n      background-color: ButtonText;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .track {\r\n      background-color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .track {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  Labelled,\r\n  Checked,\r\n  ConstraintValidation,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Touched,\r\n  AttachInternals,\r\n  Role,\r\n  M3eFocusRingElement,\r\n  M3eStateLayerElement,\r\n  Focusable,\r\n  KeyboardClick,\r\n  PressedController,\r\n  HoverController,\r\n  element,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SwitchHandleStyle, SwitchIconStyle, SwitchStateLayerStyle, SwitchStyle, SwitchTrackStyle } from \"./styles\";\r\n\r\nimport { SwitchIcons } from \"./SwitchIcons\";\r\n\r\n/**\r\n * An on/off control that can be toggled by clicking.\r\n *\r\n * @description\r\n * The `m3e-switch` component is a semantic, accessible toggle control that reflects a binary state.\r\n * Designed according to Material Design 3 guidelines, it supports shape transitions, and adaptive color\r\n * theming across selected, unselected, and disabled states. The component responds to user interaction\r\n * with smooth motion and expressive feedback. It supports optional icons (`none`, `selected`, or `both`)\r\n * and integrates with form-associated behavior, emitting `input` and `change` events when toggled.\r\n *\r\n * @example\r\n * The following example illustrates a switch wrapped by a `label`.\r\n *\r\n * ```html\r\n * <label>Switch label&nbsp;<m3e-switch></m3e-switch></label>\r\n * ```\r\n *\r\n * @example\r\n * By default, icons are not presented. Use the `icons` attribute to control which icons to show. The next\r\n * example illustrates showing both the unselected and selected icons.\r\n *\r\n * ```html\r\n * <label>Switch label&nbsp;<m3e-switch icons=\"both\"></m3e-switch></label>\r\n * ```\r\n *\r\n * @tag m3e-switch\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr icons - The icons to present.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr value - A string representing the value of the switch.\r\n *\r\n * @fires input - Emitted when the checked state changes.\r\n * @fires change - Emitted when the checked state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-switch-selected-icon-color - Color of the icon when the switch is selected.\r\n * @cssprop --m3e-switch-selected-icon-size - Size of the icon in the selected state.\r\n * @cssprop --m3e-switch-unselected-icon-color - Color of the icon when the switch is unselected.\r\n * @cssprop --m3e-switch-unselected-icon-size - Size of the icon in the unselected state.\r\n * @cssprop --m3e-switch-track-height - Height of the switch track.\r\n * @cssprop --m3e-switch-track-width - Width of the switch track.\r\n * @cssprop --m3e-switch-track-outline-color - Color of the track’s outline.\r\n * @cssprop --m3e-switch-track-outline-width - Thickness of the track’s outline.\r\n * @cssprop --m3e-switch-track-shape - Corner shape of the track.\r\n * @cssprop --m3e-switch-selected-track-color - Track color when selected.\r\n * @cssprop --m3e-switch-unselected-track-color - Track color when unselected.\r\n * @cssprop --m3e-switch-unselected-handle-height - Height of the handle when unselected.\r\n * @cssprop --m3e-switch-unselected-handle-width - Width of the handle when unselected.\r\n * @cssprop --m3e-switch-with-icon-handle-height - Height of the handle when icons are present.\r\n * @cssprop --m3e-switch-with-icon-handle-width - Width of the handle when icons are present.\r\n * @cssprop --m3e-switch-selected-handle-height - Height of the handle when selected.\r\n * @cssprop --m3e-switch-selected-handle-width - Width of the handle when selected.\r\n * @cssprop --m3e-switch-pressed-handle-height - Height of the handle during press.\r\n * @cssprop --m3e-switch-pressed-handle-width - Width of the handle during press.\r\n * @cssprop --m3e-switch-handle-shape - Corner shape of the handle.\r\n * @cssprop --m3e-switch-selected-handle-color - Handle color when selected.\r\n * @cssprop --m3e-switch-unselected-handle-color - Handle color when unselected.\r\n * @cssprop --m3e-switch-state-layer-size - Diameter of the state layer overlay.\r\n * @cssprop --m3e-switch-state-layer-shape - Corner shape of the state layer.\r\n * @cssprop --m3e-switch-disabled-selected-icon-color - Icon color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-icon-opacity - Icon opacity when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-icon-color - Icon color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-icon-opacity - Icon opacity when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-track-opacity - Track opacity when disabled.\r\n * @cssprop --m3e-switch-disabled-selected-track-color - Track color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-track-color - Track color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-track-outline-color - Outline color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-handle-opacity - Handle opacity when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-handle-opacity - Handle opacity when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-handle-color - Handle color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-handle-color - Handle color when unselected and disabled.\r\n * @cssprop --m3e-switch-selected-hover-icon-color - Icon color when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-icon-color - Icon color when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-track-color - Track color when selected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-state-layer-color - State layer color when selected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-state-layer-opacity - State layer opacity when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-track-color - Track color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-track-outline-color - Outline color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-state-layer-color - State layer color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-state-layer-opacity - State layer opacity when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-handle-color - Handle color when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-handle-color - Handle color when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-focus-icon-color - Icon color when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-icon-color - Icon color when unselected and focused.\r\n * @cssprop --m3e-switch-selected-focus-track-color - Track color when selected and focused.\r\n * @cssprop --m3e-switch-selected-focus-state-layer-color - State layer color when selected and focused.\r\n * @cssprop --m3e-switch-selected-focus-state-layer-opacity - State layer opacity when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-track-color - Track color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-track-outline-color - Outline color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-state-layer-color - State layer color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-state-layer-opacity - State layer opacity when unselected and focused.\r\n * @cssprop --m3e-switch-selected-focus-handle-color - Handle color when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-handle-color - Handle color when unselected and focused.\r\n * @cssprop --m3e-switch-selected-pressed-icon-color - Icon color when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-icon-color - Icon color when unselected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-track-color - Track color when selected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-state-layer-color - State layer color when selected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-state-layer-opacity - State layer opacity when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-track-color - Track color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-track-outline-color - Outline color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-state-layer-color - State layer color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-state-layer-opacity - State layer opacity when unselected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-handle-color - Handle color when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-handle-color - Handle color when unselected and pressed.\r\n */\r\n@element(\"m3e-switch\")\r\nexport class M3eSwitchElement extends Labelled(\r\n  Dirty(\r\n    Touched(\r\n      ConstraintValidation(\r\n        Checked(FormAssociated(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"switch\"))))))),\r\n      ),\r\n    ),\r\n  ),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    SwitchStyle,\r\n    SwitchStateLayerStyle,\r\n    SwitchTrackStyle,\r\n    SwitchHandleStyle,\r\n    SwitchIconStyle,\r\n  ];\r\n\r\n  /** @private */ @query(\".track\") private readonly _track?: HTMLElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @private */ readonly #hoverController = new HoverController(this, {\r\n    target: null,\r\n    callback: (hovering) => {\r\n      if (this.disabled) return;\r\n      if (hovering) {\r\n        this._stateLayer?.show(\"hover\");\r\n      } else {\r\n        this._stateLayer?.hide(\"hover\");\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    callback: (pressed) => this._track?.classList.toggle(\"pressed\", pressed && !this.disabled),\r\n  });\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new PressedController(this, {\r\n      isPressedKey: (key) => key === \" \",\r\n      callback: (pressed) => this._track?.classList.toggle(\"pressed\", pressed && !this.disabled),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * The icons to present.\r\n   * @default \"none\"\r\n   */\r\n  @property({ reflect: true }) icons: SwitchIcons = \"none\";\r\n\r\n  /**\r\n   * A string representing the value of the switch.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc @private */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.checked && !this.disabled ? this.value : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    for (const label of this.labels) {\r\n      this.#hoverController.observe(label);\r\n      this.#pressedController.observe(label);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n    for (const label of this.labels) {\r\n      this.#hoverController.unobserve(label);\r\n      this.#pressedController.unobserve(label);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>\r\n      <div class=\"track\" aria-hidden=\"true\">\r\n        <div class=\"touch\" aria-hidden=\"true\"></div>\r\n        <div class=\"handle\">\r\n          <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n          <div class=\"base\">${this.#renderIcon()}</div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    return this.checked\r\n      ? html`<svg class=\"icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <path fill=\"currentColor\" d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"></path>\r\n        </svg>`\r\n      : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n          <path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n        </svg>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n    this.checked = !this.checked;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.checked = !this.checked;\r\n    }\r\n\r\n    // Prevent default avoids double-click in FireFox.\r\n    if (this.closest(\"label\")) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-switch\": M3eSwitchElement;\r\n  }\r\n}\r\n"],"names":["__decorate","decorators","target","key","desc","d","c","arguments","length","r","Object","getOwnPropertyDescriptor","Reflect","decorate","i","defineProperty","__classPrivateFieldGet","receiver","state","kind","f","TypeError","has","call","value","get","SuppressedError","SwitchToken","unsafeCSS","DesignToken","color","onPrimaryContainer","surfaceContainerHighest","outline","shape","corner","full","primary","onPrimary","onSurface","surface","onSurfaceVariant","primaryContainer","SwitchHandleStyle","css","motion","duration","short4","easing","standard","spring","fastEffects","fastSpatial","SwitchIconStyle","SwitchStateLayerStyle","SwitchStyle","SwitchTrackStyle","M3eSwitchElement","Labelled","Dirty","Touched","ConstraintValidation","Checked","FormAssociated","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","super","_M3eSwitchElement_clickHandler","set","this","e","_M3eSwitchElement_hoverController","HoverController","callback","hovering","disabled","_stateLayer","show","hide","_M3eSwitchElement_pressedController","PressedController","pressed","_track","classList","toggle","icons","isPressedKey","WeakMap","_M3eSwitchElement_instances","WeakSet","formValue","checked","connectedCallback","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eSwitchElement_renderIcon","defaultPrevented","dispatchEvent","Event","bubbles","composed","cancelable","closest","preventDefault","styles","query","prototype","property","reflect","element"],"mappings":";;;;;+ZAsDO,SAASA,EAAWC,EAAYC,EAAQC,EAAKC,GAChD,IAA2HC,EAAvHC,EAAIC,UAAUC,OAAQC,EAAIH,EAAI,EAAIJ,EAAkB,OAATE,EAAgBA,EAAOM,OAAOC,yBAAyBT,EAAQC,GAAOC,EACrH,GAAuB,iBAAZQ,SAAoD,mBAArBA,QAAQC,SAAyBJ,EAAIG,QAAQC,SAASZ,EAAYC,EAAQC,EAAKC,QACpH,IAAK,IAAIU,EAAIb,EAAWO,OAAS,EAAGM,GAAK,EAAGA,KAAST,EAAIJ,EAAWa,MAAIL,GAAKH,EAAI,EAAID,EAAEI,GAAKH,EAAI,EAAID,EAAEH,EAAQC,EAAKM,GAAKJ,EAAEH,EAAQC,KAASM,GAChJ,OAAOH,EAAI,GAAKG,GAAKC,OAAOK,eAAeb,EAAQC,EAAKM,GAAIA,CAChE,CAmOO,SAASO,EAAuBC,EAAUC,EAAOC,EAAMC,GAC1D,GAAa,MAATD,IAAiBC,EAAG,MAAM,IAAIC,UAAU,iDAC5C,GAAqB,mBAAVH,EAAuBD,IAAaC,IAAUE,GAAKF,EAAMI,IAAIL,GAAW,MAAM,IAAII,UAAU,4EACvG,MAAgB,MAATF,EAAeC,EAAa,MAATD,EAAeC,EAAEG,KAAKN,GAAYG,EAAIA,EAAEI,MAAQN,EAAMO,IAAIR,EACxF,CAsCkD,mBAApBS,iBAAiCA,gBChUxD,MAAMC,EACQC,EAAU,yCAAyCC,EAAYC,MAAMC,uBAD7EJ,EAEOC,EAAU,8CAFjBD,EAGUC,EACnB,2CAA2CC,EAAYC,MAAME,4BAJpDL,EAMSC,EAAU,gDANnBD,EAOEC,EAAU,wCAPZD,EAQCC,EAAU,0CARXD,EASQC,EAAU,yCAAyCC,EAAYC,MAAMG,YAT7EN,EAUQC,EAAU,8CAVlBD,EAWCC,EAAU,iCAAiCC,EAAYK,MAAMC,OAAOC,SAXrET,EAYSC,EAAU,0CAA0CC,EAAYC,MAAMO,YAZ/EV,EAaWC,EACpB,4CAA4CC,EAAYC,MAAME,4BAdrDL,EAgBaC,EAAU,oDAhBvBD,EAiBYC,EAAU,mDAjBtBD,EAkBWC,EAAU,qDAlBrBD,EAmBUC,EAAU,oDAnBpBD,EAoBWC,EAAU,oDApBrBD,EAqBUC,EAAU,mDArBpBD,EAsBUC,EAAU,oDAtBpBD,EAuBSC,EAAU,mDAvBnBD,EAwBEC,EAAU,kCAAkCC,EAAYK,MAAMC,OAAOC,SAxBvET,EAyBUC,EAAU,2CAA2CC,EAAYC,MAAMQ,cAzBjFX,EA0BYC,EAAU,6CAA6CC,EAAYC,MAAMG,YA1BrFN,EA2BKC,EAAU,8CA3BfD,EA4BMC,EAAU,uCAAuCC,EAAYK,MAAMC,OAAOC,SA5BhFT,EA6BgBC,EACzB,kDAAkDC,EAAYC,MAAMS,cA9B3DZ,EAgCkBC,EAAU,yDAhC5BD,EAiCkBC,EAC3B,oDAAoDC,EAAYC,MAAME,4BAlC7DL,EAoCoBC,EAAU,2DApC9BD,EAqCWC,EAAU,iDArCrBD,EAsCiBC,EAC1B,mDAAmDC,EAAYC,MAAMS,cAvC5DZ,GAyCmBC,EAC5B,qDAAqDC,EAAYC,MAAME,4BA1C9DL,GA4C0BC,EACnC,6DAA6DC,EAAYC,MAAMS,cA7CtEZ,GA+CsBC,EAAU,6DA/ChCD,GAgDoBC,EAAU,4DAhD9BD,GAiDkBC,EAC3B,oDAAoDC,EAAYC,MAAMU,YAlD7Db,GAoDoBC,EAC7B,sDAAsDC,EAAYC,MAAMS,cArD/DZ,GAuDaC,EACtB,+CAA+CC,EAAYC,MAAMC,uBAxDxDJ,GA0DeC,EACxB,iDAAiDC,EAAYC,MAAME,4BA3D1DL,GA6DcC,EAAU,gDAAgDC,EAAYC,MAAMO,YA7D1FV,GA8DmBC,EAC5B,sDAAsDC,EAAYC,MAAMO,YA/D/DV,GAiEqBC,EAAU,4DAjE/BD,GAkEgBC,EACzB,kDAAkDC,EAAYC,MAAME,4BAnE3DL,GAqEuBC,EAChC,0DAA0DC,EAAYC,MAAMG,YAtEnEN,GAwEqBC,EAC9B,wDAAwDC,EAAYC,MAAMS,cAzEjEZ,GA2EuBC,EAAU,8DA3EjCD,GA4EeC,EACxB,iDAAiDC,EAAYC,MAAME,4BA7E1DL,GA+EiBC,EAC1B,mDAAmDC,EAAYC,MAAMW,qBAhF5Dd,GAkFaC,EACtB,+CAA+CC,EAAYC,MAAMC,uBAnFxDJ,GAqFeC,EACxB,iDAAiDC,EAAYC,MAAME,4BAtF1DL,GAwFcC,EAAU,gDAAgDC,EAAYC,MAAMO,YAxF1FV,GAyFmBC,EAC5B,sDAAsDC,EAAYC,MAAMO,YA1F/DV,GA4FqBC,EAAU,6DA5F/BD,GA6FgBC,EACzB,kDAAkDC,EAAYC,MAAME,4BA9F3DL,GAgGuBC,EAChC,0DAA0DC,EAAYC,MAAMG,YAjGnEN,GAmGqBC,EAC9B,wDAAwDC,EAAYC,MAAMS,cApGjEZ,GAsGuBC,EAAU,+DAtGjCD,GAuGeC,EACxB,iDAAiDC,EAAYC,MAAMY,qBAxG1Df,GA0GiBC,EAC1B,mDAAmDC,EAAYC,MAAMW,qBA3G5Dd,GA6GeC,EACxB,iDAAiDC,EAAYC,MAAMC,uBA9G1DJ,GAgHiBC,EAC1B,mDAAmDC,EAAYC,MAAME,4BAjH5DL,GAmHgBC,EAAU,kDAAkDC,EAAYC,MAAMO,YAnH9FV,IAoHqBC,EAC9B,wDAAwDC,EAAYC,MAAMO,YAE1CT,EAAU,+DACfA,EAC3B,oDAAoDC,EAAYC,MAAME,6BAzH7DL,GA2HyBC,EAClC,4DAA4DC,EAAYC,MAAMG,YA5HrEN,IA8HuBC,EAChC,0DAA0DC,EAAYC,MAAMS,cAE1CX,EAAU,iEAClBA,EAC1B,mDAAmDC,EAAYC,MAAMY,sBAnI5Df,GAqImBC,EAC5B,qDAAqDC,EAAYC,MAAMW,qBCrI9DE,GAAoBC,CAAG,oKAQfjB,kBACHC,EACZ,oBAAoBC,EAAYgB,OAAOC,SAASC,UAAUlB,EAAYgB,OAAOG,OAAOC,yEAE5EpB,EAAYgB,OAAOK,OAAOC,8BACzBtB,EAAYgB,OAAOK,OAAOC,6EAIVtB,EAAYgB,OAAOK,OAAOE,oEAG1BvB,EAAYgB,OAAOK,OAAOC,yHAG5CxB,cACCA,+IAIDA,cACCA,+DAGDA,cACCA,wCAGDA,cACCA,oIAGUA,8HAGAA,mHAGAA,uGAGAA,+HAGAA,wHAGAA,6GAGAA,iGAGAA,sGAKhBA,MAA6CA,+GAO7CA,MAA2CA,mHAMtCA,OAA4BA,YAA0CA,kHAOrEA,OAA4BA,YAA0CA,wGAOvEA,OAA4BA,OAAoCA,qGAKrDA,OAA4BA,OAAoCA,uMAO9EA,YAAwCA,OAAoCA,wMASxEA,YACOA,OAAoCA,oJAM7BA,mJAGWA,iEAInBC,EACZ,wDACMC,EAAYgB,OAAOK,OAAOC,8BACzBtB,EAAYgB,OAAOK,OAAOC,4/BCnI5BE,GAAkBT,CAAG,sLAQhBhB,EAAU,SAASC,EAAYgB,OAAOC,SAASC,UAAUlB,EAAYgB,OAAOG,OAAOC,4DAGpFtB,4CAGAA,uHAGJA,iHAGAA,sGAGAA,0FAGAA,kHAGAA,2GAGAA,gGAGAA,oFAGAA,yFAKLA,KAA2CA,iGAO3CA,KAAyCA,69BCjDpC2B,GAAwBV,CAAG,yBAE3BjB,cACCA,qBACOA,kBACHC,EACZ,OAAOC,EAAYgB,OAAOK,OAAOC,gCACtBtB,EAAYgB,OAAOK,OAAOC,iCACzBtB,EAAYgB,OAAOK,OAAOC,uIAIGxB,OAAgCA,uCAC/CA,OAAgCA,wIAIxCA,OAAgCA,wCAExBA,OAAgCA,6GAGjBA,OAAgCA,uCAC/CA,OAAgCA,sFAGjBA,OAAgCA,uCAC/CA,OAAgCA,oFAG3BA,wCACEA,sCACFA,wCACEA,wEAGFA,wCACEA,sCACFA,wCACEA,QC1C1B4B,GAAcX,CAAG,wQAcTjB,8ICZR6B,GAAmBZ,CAAG,2GAMdjB,aACRA,cACCA,kBACIC,EACZ,oBAAoBC,EAAYgB,OAAOC,SAASC,UAAUlB,EAAYgB,OAAOG,OAAOC,gEAItEtB,6IAIAA,wBACIA,kHAGJA,yBACIA,uGAGJA,yBACIA,2FAGJA,yBACIA,iGAKhBA,MAAmDA,2DAKnDA,MAA4CA,qIAK5BA,gHAGAA,qGAGAA,yFAGAA,+FAKhBA,KAA0CA,ikCCkE3C,IAAM8B,GAAN,cAA+BC,EACpCC,EACEC,EACEC,EACEC,EAAQC,EAAeC,EAAcC,EAAUC,EAASC,EAAgBC,EAAKC,EAAY,qBAoC/FC,WAAAA,GACEC,qBApBuBC,GAAAC,IAAAC,KAAiBC,GAAa3D,EAAA0D,gBAAiBnD,KAAjBmD,KAAkBC,IAEhDC,GAAAH,IAAAC,KAAmB,IAAIG,EAAgBH,KAAM,CACpExE,OAAQ,KACR4E,SAAWC,IACLL,KAAKM,WACLD,EACFL,KAAKO,aAAaC,KAAK,SAEvBR,KAAKO,aAAaE,KAAK,cAKJC,GAAAX,IAAAC,KAAqB,IAAIW,EAAkBX,KAAM,CACxExE,OAAQ,KACR4E,SAAWQ,GAAYZ,KAAKa,QAAQC,UAAUC,OAAO,UAAWH,IAAYZ,KAAKM,aAgBtDN,KAAAgB,MAAqB,OAMtChB,KAAAlD,MAAQ,KAhBlB,IAAI6D,EAAkBX,KAAM,CAC1BiB,aAAexF,GAAgB,MAARA,EACvB2E,SAAWQ,GAAYZ,KAAKa,QAAQC,UAAUC,OAAO,UAAWH,IAAYZ,KAAKM,WAErF,CAeA,KAAaR,GAAA,IAAAoB,QAAAhB,GAAA,IAAAgB,QAAAR,GAAA,IAAAQ,QAAAC,GAAA,IAAAC,QAACC,MACZ,OAAOrB,KAAKsB,UAAYtB,KAAKM,SAAWN,KAAKlD,MAAQ,IACvD,CAGSyE,iBAAAA,GACP1B,MAAM0B,oBAENvB,KAAKwB,iBAAiB,QAASlF,EAAA0D,KAAIF,GAAA,MACnC,IAAK,MAAM2B,KAASzB,KAAK0B,OACvBpF,EAAA0D,KAAIE,GAAA,KAAkByB,QAAQF,GAC9BnF,EAAA0D,KAAIU,GAAA,KAAoBiB,QAAQF,EAEpC,CAGSG,oBAAAA,GACP/B,MAAM+B,uBAEN5B,KAAK6B,oBAAoB,QAASvF,EAAA0D,KAAIF,GAAA,MACtC,IAAK,MAAM2B,KAASzB,KAAK0B,OACvBpF,EAAA0D,KAAIE,GAAA,KAAkB4B,UAAUL,GAChCnF,EAAA0D,KAAIU,GAAA,KAAoBoB,UAAUL,EAEtC,CAGmBM,YAAAA,CAAaC,GAC9BnC,MAAMkC,aAAaC,GACnB,CAAChC,KAAKiC,WAAYjC,KAAKO,aAAa2B,QAASC,GAAMA,GAAGC,OAAOpC,MAC/D,CAGmBqC,MAAAA,GACjB,OAAOC,CAAI,6MAI6CtC,KAAKM,iDACnChE,EAAA0D,KAAImB,GAAA,IAAAoB,IAAY1F,KAAhBmD,yBAG5B,iBAIE,OAAOA,KAAKsB,QACRgB,CAAI,2KAGJA,CAAI,oLAGV,cAGarC,GACPA,EAAEuC,mBACNxC,KAAKsB,SAAWtB,KAAKsB,QACjBtB,KAAKyC,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAMC,UAAU,EAAMC,YAAY,KACrF7C,KAAKyC,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,KAElD3C,KAAKsB,SAAWtB,KAAKsB,QAInBtB,KAAK8C,QAAQ,UACf7C,EAAE8C,iBAEN,EAzHgBhE,GAAAiE,OAAyB,CACvCnE,GACAD,GACAE,GACAb,GACAU,IAGgDrD,EAAA,CAAjC2H,EAAM,WAAgDlE,GAAAmE,UAAA,cAAA,GAChB5H,EAAA,CAAtC2H,EAAM,gBAAiElE,GAAAmE,UAAA,kBAAA,GAChC5H,EAAA,CAAvC2H,EAAM,iBAAoElE,GAAAmE,UAAA,mBAAA,GAiC9D5H,EAAA,CAA5B6H,EAAS,CAAEC,SAAS,KAAoCrE,GAAAmE,UAAA,aAAA,GAM7C5H,EAAA,CAAX6H,KAAwBpE,GAAAmE,UAAA,aAAA,GA3DdnE,GAAgBzD,EAAA,CAD5B+H,EAAQ,eACItE","x_google_ignoreList":[0]}
+{"version":3,"file":"switch.min.js","sources":["../../../node_modules/tslib/tslib.es6.js","../../src/switch/styles/SwitchToken.ts","../../src/switch/styles/SwitchHandleStyle.ts","../../src/switch/styles/SwitchIconStyle.ts","../../src/switch/styles/SwitchStateLayerStyle.ts","../../src/switch/styles/SwitchStyle.ts","../../src/switch/styles/SwitchTrackStyle.ts","../../src/switch/SwitchElement.ts"],"sourcesContent":["/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\r\n\r\nvar extendStatics = function(d, b) {\r\n    extendStatics = Object.setPrototypeOf ||\r\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n    return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n    if (typeof b !== \"function\" && b !== null)\r\n        throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n    extendStatics(d, b);\r\n    function __() { this.constructor = d; }\r\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n    __assign = Object.assign || function __assign(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n        }\r\n        return t;\r\n    }\r\n    return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n                t[p[i]] = s[p[i]];\r\n        }\r\n    return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n    return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\r\n    function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\r\n    var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\r\n    var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\r\n    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\r\n    var _, done = false;\r\n    for (var i = decorators.length - 1; i >= 0; i--) {\r\n        var context = {};\r\n        for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\r\n        for (var p in contextIn.access) context.access[p] = contextIn.access[p];\r\n        context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\r\n        var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\r\n        if (kind === \"accessor\") {\r\n            if (result === void 0) continue;\r\n            if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\r\n            if (_ = accept(result.get)) descriptor.get = _;\r\n            if (_ = accept(result.set)) descriptor.set = _;\r\n            if (_ = accept(result.init)) initializers.unshift(_);\r\n        }\r\n        else if (_ = accept(result)) {\r\n            if (kind === \"field\") initializers.unshift(_);\r\n            else descriptor[key] = _;\r\n        }\r\n    }\r\n    if (target) Object.defineProperty(target, contextIn.name, descriptor);\r\n    done = true;\r\n};\r\n\r\nexport function __runInitializers(thisArg, initializers, value) {\r\n    var useValue = arguments.length > 2;\r\n    for (var i = 0; i < initializers.length; i++) {\r\n        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\r\n    }\r\n    return useValue ? value : void 0;\r\n};\r\n\r\nexport function __propKey(x) {\r\n    return typeof x === \"symbol\" ? x : \"\".concat(x);\r\n};\r\n\r\nexport function __setFunctionName(f, name, prefix) {\r\n    if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\r\n    return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\r\n};\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n    if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n    return new (P || (P = Promise))(function (resolve, reject) {\r\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n    });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\r\n    return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n    function verb(n) { return function (v) { return step([n, v]); }; }\r\n    function step(op) {\r\n        if (f) throw new TypeError(\"Generator is already executing.\");\r\n        while (g && (g = 0, op[0] && (_ = 0)), _) try {\r\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n            if (y = 0, t) op = [op[0] & 2, t.value];\r\n            switch (op[0]) {\r\n                case 0: case 1: t = op; break;\r\n                case 4: _.label++; return { value: op[1], done: false };\r\n                case 5: _.label++; y = op[1]; op = [0]; continue;\r\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n                default:\r\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n                    if (t[2]) _.ops.pop();\r\n                    _.trys.pop(); continue;\r\n            }\r\n            op = body.call(thisArg, _);\r\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n    }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    var desc = Object.getOwnPropertyDescriptor(m, k);\r\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\r\n        desc = { enumerable: true, get: function() { return m[k]; } };\r\n    }\r\n    Object.defineProperty(o, k2, desc);\r\n}) : (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n    var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n    if (m) return m.call(o);\r\n    if (o && typeof o.length === \"number\") return {\r\n        next: function () {\r\n            if (o && i >= o.length) o = void 0;\r\n            return { value: o && o[i++], done: !o };\r\n        }\r\n    };\r\n    throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n    if (!m) return o;\r\n    var i = m.call(o), r, ar = [], e;\r\n    try {\r\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n    }\r\n    catch (error) { e = { error: error }; }\r\n    finally {\r\n        try {\r\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n        }\r\n        finally { if (e) throw e.error; }\r\n    }\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n    for (var ar = [], i = 0; i < arguments.length; i++)\r\n        ar = ar.concat(__read(arguments[i]));\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n    for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n            r[k] = a[j];\r\n    return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n        if (ar || !(i in from)) {\r\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n            ar[i] = from[i];\r\n        }\r\n    }\r\n    return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n    return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n    return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n    function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\r\n    function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\r\n    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n    function fulfill(value) { resume(\"next\", value); }\r\n    function reject(value) { resume(\"throw\", value); }\r\n    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n    var i, p;\r\n    return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var m = o[Symbol.asyncIterator], i;\r\n    return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n    if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n    return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n    o[\"default\"] = v;\r\n};\r\n\r\nvar ownKeys = function(o) {\r\n    ownKeys = Object.getOwnPropertyNames || function (o) {\r\n        var ar = [];\r\n        for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\r\n        return ar;\r\n    };\r\n    return ownKeys(o);\r\n};\r\n\r\nexport function __importStar(mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\r\n    __setModuleDefault(result, mod);\r\n    return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n    return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n    return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n    if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n    return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n\r\nexport function __classPrivateFieldIn(state, receiver) {\r\n    if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\r\n    return typeof state === \"function\" ? receiver === state : state.has(receiver);\r\n}\r\n\r\nexport function __addDisposableResource(env, value, async) {\r\n    if (value !== null && value !== void 0) {\r\n        if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\r\n        var dispose, inner;\r\n        if (async) {\r\n            if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\r\n            dispose = value[Symbol.asyncDispose];\r\n        }\r\n        if (dispose === void 0) {\r\n            if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\r\n            dispose = value[Symbol.dispose];\r\n            if (async) inner = dispose;\r\n        }\r\n        if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\r\n        if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\r\n        env.stack.push({ value: value, dispose: dispose, async: async });\r\n    }\r\n    else if (async) {\r\n        env.stack.push({ async: true });\r\n    }\r\n    return value;\r\n\r\n}\r\n\r\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\r\n    var e = new Error(message);\r\n    return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\r\n};\r\n\r\nexport function __disposeResources(env) {\r\n    function fail(e) {\r\n        env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\r\n        env.hasError = true;\r\n    }\r\n    var r, s = 0;\r\n    function next() {\r\n        while (r = env.stack.pop()) {\r\n            try {\r\n                if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\r\n                if (r.dispose) {\r\n                    var result = r.dispose.call(r.value);\r\n                    if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\r\n                }\r\n                else s |= 1;\r\n            }\r\n            catch (e) {\r\n                fail(e);\r\n            }\r\n        }\r\n        if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\r\n        if (env.hasError) throw env.error;\r\n    }\r\n    return next();\r\n}\r\n\r\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\r\n    if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\r\n        return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\r\n            return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\r\n        });\r\n    }\r\n    return path;\r\n}\r\n\r\nexport default {\r\n    __extends: __extends,\r\n    __assign: __assign,\r\n    __rest: __rest,\r\n    __decorate: __decorate,\r\n    __param: __param,\r\n    __esDecorate: __esDecorate,\r\n    __runInitializers: __runInitializers,\r\n    __propKey: __propKey,\r\n    __setFunctionName: __setFunctionName,\r\n    __metadata: __metadata,\r\n    __awaiter: __awaiter,\r\n    __generator: __generator,\r\n    __createBinding: __createBinding,\r\n    __exportStar: __exportStar,\r\n    __values: __values,\r\n    __read: __read,\r\n    __spread: __spread,\r\n    __spreadArrays: __spreadArrays,\r\n    __spreadArray: __spreadArray,\r\n    __await: __await,\r\n    __asyncGenerator: __asyncGenerator,\r\n    __asyncDelegator: __asyncDelegator,\r\n    __asyncValues: __asyncValues,\r\n    __makeTemplateObject: __makeTemplateObject,\r\n    __importStar: __importStar,\r\n    __importDefault: __importDefault,\r\n    __classPrivateFieldGet: __classPrivateFieldGet,\r\n    __classPrivateFieldSet: __classPrivateFieldSet,\r\n    __classPrivateFieldIn: __classPrivateFieldIn,\r\n    __addDisposableResource: __addDisposableResource,\r\n    __disposeResources: __disposeResources,\r\n    __rewriteRelativeImportExtension: __rewriteRelativeImportExtension,\r\n};\r\n","import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens that control `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchToken = {\r\n  selectedIconColor: unsafeCSS(`var(--m3e-switch-selected-icon-color, ${DesignToken.color.onPrimaryContainer})`),\r\n  selectedIconSize: unsafeCSS(\"var(--m3e-switch-selected-icon-size, 1rem)\"),\r\n  unselectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedIconSize: unsafeCSS(\"var(--m3e-switch-unselected-icon-size, 1rem)\"),\r\n  trackHeight: unsafeCSS(\"var(--m3e-switch-track-height, 2rem)\"),\r\n  trackWidth: unsafeCSS(\"var(--m3e-switch-track-width, 3.25rem)\"),\r\n  trackOutlineColor: unsafeCSS(`var(--m3e-switch-track-outline-color, ${DesignToken.color.outline})`),\r\n  trackOutlineWidth: unsafeCSS(\"var(--m3e-switch-track-outline-width, 2px)\"),\r\n  trackShape: unsafeCSS(`var(--m3e-switch-track-shape, ${DesignToken.shape.corner.full})`),\r\n  selectedTrackColor: unsafeCSS(`var(--m3e-switch-selected-track-color, ${DesignToken.color.primary})`),\r\n  unselectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHandleHeight: unsafeCSS(\"var(--m3e-switch-unselected-handle-height, 1rem)\"),\r\n  unselectedHandleWidth: unsafeCSS(\"var(--m3e-switch-unselected-handle-width, 1rem)\"),\r\n  withIconHandleHeight: unsafeCSS(\"var(--m3e-switch-with-icon-handle-height, 1.5rem)\"),\r\n  withIconHandleWidth: unsafeCSS(\"var(--m3e-switch-with-icon-handle-width, 1.5rem)\"),\r\n  selectedHandleHeight: unsafeCSS(\"var(--m3e-switch-selected-handle-height, 1.5rem)\"),\r\n  selectedHandleWidth: unsafeCSS(\"var(--m3e-switch-selected-handle-width, 1.5rem)\"),\r\n  pressedHandleHeight: unsafeCSS(\"var(--m3e-switch-pressed-handle-height, 1.75rem)\"),\r\n  pressedHandleWidth: unsafeCSS(\"var(--m3e-switch-pressed-handle-width, 1.75rem)\"),\r\n  handleShape: unsafeCSS(`var(--m3e-switch-handle-shape, ${DesignToken.shape.corner.full})`),\r\n  selectedHandleColor: unsafeCSS(`var(--m3e-switch-selected-handle-color, ${DesignToken.color.onPrimary})`),\r\n  unselectedHandleColor: unsafeCSS(`var(--m3e-switch-unselected-handle-color, ${DesignToken.color.outline})`),\r\n  stateLayerSize: unsafeCSS(\"var(--m3e-switch-state-layer-size, 2.5rem)\"),\r\n  stateLayerShape: unsafeCSS(`var(--m3e-switch-state-layer-shape, ${DesignToken.shape.corner.full})`),\r\n  disabledSelectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-icon-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledSelectedIconOpacity: unsafeCSS(\"var(--m3e-switch-disabled-selected-icon-opacity, 38%)\"),\r\n  disabledUnselectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  disabledUnselectedIconOpacity: unsafeCSS(\"var(--m3e-switch-disabled-unselected-icon-opacity, 38%)\"),\r\n  disabledTrackOpacity: unsafeCSS(\"var(--m3e-switch-disabled-track-opacity, 12%)\"),\r\n  disabledSelectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-track-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledUnselectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  disabledUnselectedTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-track-outline-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledUnselectedHandleOpacity: unsafeCSS(\"var(--m3e-switch-disabled-unselected-handle-opacity, 38%)\"),\r\n  disabledSelectedHandleOpacity: unsafeCSS(\"var(--m3e-switch-disabled-selected-handle-opacity, 100%)\"),\r\n  disabledSelectedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-handle-color, ${DesignToken.color.surface})`,\r\n  ),\r\n  disabledUnselectedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-handle-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  selectedHoverIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedHoverIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedHoverTrackColor: unsafeCSS(`var(--m3e-switch-selected-hover-track-color, ${DesignToken.color.primary})`),\r\n  selectedHoverStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedHoverStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-hover-state-layer-opacity, 8%)\"),\r\n  unselectedHoverTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHoverTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedHoverStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedHoverStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-hover-state-layer-opacity, 8%)\"),\r\n  selectedHoverHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-handle-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHoverHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n  selectedFocusIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedFocusIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedFocusTrackColor: unsafeCSS(`var(--m3e-switch-selected-focus-track-color, ${DesignToken.color.primary})`),\r\n  selectedFocusStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedFocusStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-focus-state-layer-opacity, 10%)\"),\r\n  unselectedFocusTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedFocusTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedFocusStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedFocusStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-focus-state-layer-opacity, 10%)\"),\r\n  selectedFocusHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-handle-color, ${DesignToken.color.primaryContainer})`,\r\n  ),\r\n  unselectedFocusHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n  selectedPressedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedPressedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedPressedTrackColor: unsafeCSS(`var(--m3e-switch-selected-pressed-track-color, ${DesignToken.color.primary})`),\r\n  selectedPressedStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedPressedStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-pressed-state-layer-opacity, 10%)\"),\r\n  unselectedPressedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedPressedTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedPressedStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedPressedStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-pressed-state-layer-opacity, 10%)\"),\r\n  selectedPressedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-handle-color, ${DesignToken.color.primaryContainer})`,\r\n  ),\r\n  unselectedPressedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Handle styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchHandleStyle = css`\r\n  .handle {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    pointer-events: none;\r\n    transform-origin: center center;\r\n    border-radius: ${SwitchToken.handleShape};\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n      transform var(--_switch-handle-effect),\r\n      width ${DesignToken.motion.spring.fastEffects},\r\n      height ${DesignToken.motion.spring.fastEffects}`,\r\n    )};\r\n  }\r\n  .track:not(.pressed) .handle {\r\n    --_switch-handle-effect: ${DesignToken.motion.spring.fastSpatial};\r\n  }\r\n  .track.pressed .handle {\r\n    --_switch-handle-effect: ${DesignToken.motion.spring.fastEffects};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    width: ${SwitchToken.withIconHandleWidth};\r\n    height: ${SwitchToken.withIconHandleHeight};\r\n  }\r\n  :host(:not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n    width: ${SwitchToken.unselectedHandleWidth};\r\n    height: ${SwitchToken.unselectedHandleHeight};\r\n  }\r\n  :host([checked]) .track:not(.pressed) .handle {\r\n    width: ${SwitchToken.selectedHandleWidth};\r\n    height: ${SwitchToken.selectedHandleHeight};\r\n  }\r\n  .track.pressed .handle {\r\n    width: ${SwitchToken.pressedHandleWidth};\r\n    height: ${SwitchToken.pressedHandleHeight};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedHoverHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedFocusHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .handle {\r\n    background-color: ${SwitchToken.unselectedPressedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedHoverHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedFocusHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .handle {\r\n    background-color: ${SwitchToken.selectedPressedHandleColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedHandleColor} ${SwitchToken.disabledUnselectedHandleOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .handle {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedHandleColor} ${SwitchToken.disabledSelectedHandleOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl))[checked]) .track:not(.pressed) .handle {\r\n    transform: translateX(\r\n      calc(${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - calc(${SwitchToken.trackOutlineWidth} * 2))\r\n    );\r\n  }\r\n  :host(:dir(rtl)[checked]) .track:not(.pressed) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        0px - calc(\r\n            ${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - calc(${SwitchToken.trackOutlineWidth} * 2)\r\n          )\r\n      )\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl))[checked]) .track.pressed .handle {\r\n    transform: translateX(\r\n      calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth})\r\n    );\r\n  }\r\n  :host(:dir(rtl)[checked]) .track.pressed .handle {\r\n    transform: translateX(\r\n      calc(0px - calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth}))\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl)):not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host(:not(:dir(rtl))[aria-disabled=\"true\"]:not([checked])) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        ${SwitchToken.trackOutlineWidth} + calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})\r\n      )\r\n    );\r\n  }\r\n  :host(:dir(rtl):not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host(:dir(rtl)[aria-disabled=\"true\"]:not([checked])) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        0px - calc(\r\n            ${SwitchToken.trackOutlineWidth} +\r\n              calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})\r\n          )\r\n      )\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl)):not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    transform: translateX(${SwitchToken.trackOutlineWidth});\r\n  }\r\n  :host(:dir(rtl):not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    transform: translateX(calc(0px - ${SwitchToken.trackOutlineWidth}));\r\n  }\r\n  @media (forced-colors: active) {\r\n    .handle {\r\n      transition: ${unsafeCSS(\r\n        `transform var(--_switch-handle-effect),\r\n      width ${DesignToken.motion.spring.fastEffects},\r\n      height ${DesignToken.motion.spring.fastEffects}`,\r\n      )};\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .handle {\r\n      background-color: ButtonText;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n      background-color: GrayText;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .handle {\r\n      background-color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .handle {\r\n      background-color: Canvas;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .handle {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Icon styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchIconStyle = css`\r\n  :host([icons=\"none\"]) .icon,\r\n  :host([icons=\"selected\"]:not([checked])) .icon,\r\n  :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n    display: none;\r\n  }\r\n  .icon {\r\n    width: 1em;\r\n    transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:not([checked])) .icon {\r\n    font-size: ${SwitchToken.unselectedIconSize};\r\n  }\r\n  :host([checked]) .icon {\r\n    font-size: ${SwitchToken.selectedIconSize};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedHoverIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedFocusIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .icon {\r\n    color: ${SwitchToken.unselectedPressedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedHoverIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedFocusIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .icon {\r\n    color: ${SwitchToken.selectedPressedIconColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedIconColor} ${SwitchToken.disabledUnselectedIconOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .icon {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedIconColor} ${SwitchToken.disabledSelectedIconOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  @media (forced-colors: active) {\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .icon {\r\n      color: Canvas;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .icon {\r\n      color: CanvasText;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n      color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .icon {\r\n      color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .icon {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * State layer styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchStateLayerStyle = css`\r\n  .state-layer {\r\n    width: ${SwitchToken.stateLayerSize};\r\n    height: ${SwitchToken.stateLayerSize};\r\n    border-radius: ${SwitchToken.stateLayerShape};\r\n    transition: ${unsafeCSS(\r\n      `top ${DesignToken.motion.spring.fastEffects},\r\n          left ${DesignToken.motion.spring.fastEffects},\r\n          right ${DesignToken.motion.spring.fastEffects}`,\r\n    )};\r\n  }\r\n  :host(:not([checked])[icons=\"both\"]) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleHeight}) / 2));\r\n  }\r\n  :host(:not([checked]):not([icons=\"both\"])) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(\r\n      0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleWidth}) / 2)\r\n    );\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleHeight}) / 2));\r\n  }\r\n  :host([checked]) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleHeight}) / 2));\r\n  }\r\n  .track.pressed .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));\r\n  }\r\n  :host(:not([checked])) .state-layer {\r\n    --m3e-state-layer-hover-color: ${SwitchToken.unselectedHoverStateLayerColor};\r\n    --m3e-state-layer-hover-opacity: ${SwitchToken.unselectedHoverStateLayerOpacity};\r\n    --m3e-state-layer-focus-color: ${SwitchToken.unselectedFocusStateLayerColor};\r\n    --m3e-state-layer-focus-opacity: ${SwitchToken.unselectedFocusStateLayerOpacity};\r\n  }\r\n  :host([checked]) .state-layer {\r\n    --m3e-state-layer-hover-color: ${SwitchToken.selectedHoverStateLayerColor};\r\n    --m3e-state-layer-hover-opacity: ${SwitchToken.selectedHoverStateLayerOpacity};\r\n    --m3e-state-layer-focus-color: ${SwitchToken.selectedFocusStateLayerColor};\r\n    --m3e-state-layer-focus-opacity: ${SwitchToken.selectedFocusStateLayerOpacity};\r\n  }\r\n`;\r\n","import { css } from \"lit\";\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Baseline styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchStyle = css`\r\n  :host {\r\n    display: inline-block;\r\n    position: relative;\r\n    outline: none;\r\n    height: fit-content;\r\n    width: fit-content;\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])) {\r\n    cursor: pointer;\r\n  }\r\n  .focus-ring {\r\n    border-radius: ${SwitchToken.trackShape};\r\n  }\r\n  .touch {\r\n    position: absolute;\r\n    height: 3rem;\r\n    left: 0;\r\n    right: 0;\r\n  }\r\n  .base {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Track styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchTrackStyle = css`\r\n  .track {\r\n    display: flex;\r\n    align-items: center;\r\n    position: relative;\r\n    box-sizing: border-box;\r\n    border-radius: ${SwitchToken.trackShape};\r\n    width: ${SwitchToken.trackWidth};\r\n    height: ${SwitchToken.trackHeight};\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n    )};\r\n  }\r\n  :host(:not([checked])) .track {\r\n    border-width: ${SwitchToken.trackOutlineWidth};\r\n    border-style: solid;\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.trackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.unselectedHoverTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedHoverTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.unselectedFocusTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedFocusTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed {\r\n    border-color: ${SwitchToken.unselectedPressedTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedPressedTrackColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .track {\r\n    border-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedTrackOutlineColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedTrackColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedHoverTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedFocusTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed {\r\n    background-color: ${SwitchToken.selectedPressedTrackColor};\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .track {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedTrackColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  @media (forced-colors: active) {\r\n    .track {\r\n      transition: none;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed {\r\n      border-color: ButtonText;\r\n      background-color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .track {\r\n      border-color: GrayText;\r\n      background-color: Canvas;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed {\r\n      background-color: ButtonText;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .track {\r\n      background-color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .track {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  Labelled,\r\n  Checked,\r\n  ConstraintValidation,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Touched,\r\n  AttachInternals,\r\n  Role,\r\n  M3eFocusRingElement,\r\n  M3eStateLayerElement,\r\n  Focusable,\r\n  KeyboardClick,\r\n  PressedController,\r\n  HoverController,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SwitchHandleStyle, SwitchIconStyle, SwitchStateLayerStyle, SwitchStyle, SwitchTrackStyle } from \"./styles\";\r\n\r\nimport { SwitchIcons } from \"./SwitchIcons\";\r\n\r\n/**\r\n * An on/off control that can be toggled by clicking.\r\n *\r\n * @description\r\n * The `m3e-switch` component is a semantic, accessible toggle control that reflects a binary state.\r\n * Designed according to Material Design 3 guidelines, it supports shape transitions, and adaptive color\r\n * theming across selected, unselected, and disabled states. The component responds to user interaction\r\n * with smooth motion and expressive feedback. It supports optional icons (`none`, `selected`, or `both`)\r\n * and integrates with form-associated behavior, emitting `input` and `change` events when toggled.\r\n *\r\n * @example\r\n * The following example illustrates a switch wrapped by a `label`.\r\n *\r\n * ```html\r\n * <label>Switch label&nbsp;<m3e-switch></m3e-switch></label>\r\n * ```\r\n *\r\n * @example\r\n * By default, icons are not presented. Use the `icons` attribute to control which icons to show. The next\r\n * example illustrates showing both the unselected and selected icons.\r\n *\r\n * ```html\r\n * <label>Switch label&nbsp;<m3e-switch icons=\"both\"></m3e-switch></label>\r\n * ```\r\n *\r\n * @tag m3e-switch\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr icons - The icons to present.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr value - A string representing the value of the switch.\r\n *\r\n * @fires input - Emitted when the checked state changes.\r\n * @fires change - Emitted when the checked state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-switch-selected-icon-color - Color of the icon when the switch is selected.\r\n * @cssprop --m3e-switch-selected-icon-size - Size of the icon in the selected state.\r\n * @cssprop --m3e-switch-unselected-icon-color - Color of the icon when the switch is unselected.\r\n * @cssprop --m3e-switch-unselected-icon-size - Size of the icon in the unselected state.\r\n * @cssprop --m3e-switch-track-height - Height of the switch track.\r\n * @cssprop --m3e-switch-track-width - Width of the switch track.\r\n * @cssprop --m3e-switch-track-outline-color - Color of the track’s outline.\r\n * @cssprop --m3e-switch-track-outline-width - Thickness of the track’s outline.\r\n * @cssprop --m3e-switch-track-shape - Corner shape of the track.\r\n * @cssprop --m3e-switch-selected-track-color - Track color when selected.\r\n * @cssprop --m3e-switch-unselected-track-color - Track color when unselected.\r\n * @cssprop --m3e-switch-unselected-handle-height - Height of the handle when unselected.\r\n * @cssprop --m3e-switch-unselected-handle-width - Width of the handle when unselected.\r\n * @cssprop --m3e-switch-with-icon-handle-height - Height of the handle when icons are present.\r\n * @cssprop --m3e-switch-with-icon-handle-width - Width of the handle when icons are present.\r\n * @cssprop --m3e-switch-selected-handle-height - Height of the handle when selected.\r\n * @cssprop --m3e-switch-selected-handle-width - Width of the handle when selected.\r\n * @cssprop --m3e-switch-pressed-handle-height - Height of the handle during press.\r\n * @cssprop --m3e-switch-pressed-handle-width - Width of the handle during press.\r\n * @cssprop --m3e-switch-handle-shape - Corner shape of the handle.\r\n * @cssprop --m3e-switch-selected-handle-color - Handle color when selected.\r\n * @cssprop --m3e-switch-unselected-handle-color - Handle color when unselected.\r\n * @cssprop --m3e-switch-state-layer-size - Diameter of the state layer overlay.\r\n * @cssprop --m3e-switch-state-layer-shape - Corner shape of the state layer.\r\n * @cssprop --m3e-switch-disabled-selected-icon-color - Icon color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-icon-opacity - Icon opacity when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-icon-color - Icon color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-icon-opacity - Icon opacity when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-track-opacity - Track opacity when disabled.\r\n * @cssprop --m3e-switch-disabled-selected-track-color - Track color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-track-color - Track color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-track-outline-color - Outline color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-handle-opacity - Handle opacity when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-handle-opacity - Handle opacity when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-handle-color - Handle color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-handle-color - Handle color when unselected and disabled.\r\n * @cssprop --m3e-switch-selected-hover-icon-color - Icon color when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-icon-color - Icon color when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-track-color - Track color when selected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-state-layer-color - State layer color when selected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-state-layer-opacity - State layer opacity when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-track-color - Track color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-track-outline-color - Outline color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-state-layer-color - State layer color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-state-layer-opacity - State layer opacity when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-handle-color - Handle color when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-handle-color - Handle color when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-focus-icon-color - Icon color when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-icon-color - Icon color when unselected and focused.\r\n * @cssprop --m3e-switch-selected-focus-track-color - Track color when selected and focused.\r\n * @cssprop --m3e-switch-selected-focus-state-layer-color - State layer color when selected and focused.\r\n * @cssprop --m3e-switch-selected-focus-state-layer-opacity - State layer opacity when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-track-color - Track color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-track-outline-color - Outline color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-state-layer-color - State layer color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-state-layer-opacity - State layer opacity when unselected and focused.\r\n * @cssprop --m3e-switch-selected-focus-handle-color - Handle color when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-handle-color - Handle color when unselected and focused.\r\n * @cssprop --m3e-switch-selected-pressed-icon-color - Icon color when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-icon-color - Icon color when unselected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-track-color - Track color when selected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-state-layer-color - State layer color when selected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-state-layer-opacity - State layer opacity when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-track-color - Track color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-track-outline-color - Outline color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-state-layer-color - State layer color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-state-layer-opacity - State layer opacity when unselected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-handle-color - Handle color when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-handle-color - Handle color when unselected and pressed.\r\n */\r\n@customElement(\"m3e-switch\")\r\nexport class M3eSwitchElement extends Labelled(\r\n  Dirty(\r\n    Touched(\r\n      ConstraintValidation(\r\n        Checked(FormAssociated(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"switch\"))))))),\r\n      ),\r\n    ),\r\n  ),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    SwitchStyle,\r\n    SwitchStateLayerStyle,\r\n    SwitchTrackStyle,\r\n    SwitchHandleStyle,\r\n    SwitchIconStyle,\r\n  ];\r\n\r\n  /** @private */ @query(\".track\") private readonly _track?: HTMLElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @private */ readonly #hoverController = new HoverController(this, {\r\n    target: null,\r\n    callback: (hovering) => {\r\n      if (this.disabled) return;\r\n      if (hovering) {\r\n        this._stateLayer?.show(\"hover\");\r\n      } else {\r\n        this._stateLayer?.hide(\"hover\");\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    callback: (pressed) => this._track?.classList.toggle(\"pressed\", pressed && !this.disabled),\r\n  });\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new PressedController(this, {\r\n      isPressedKey: (key) => key === \" \",\r\n      callback: (pressed) => this._track?.classList.toggle(\"pressed\", pressed && !this.disabled),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * The icons to present.\r\n   * @default \"none\"\r\n   */\r\n  @property({ reflect: true }) icons: SwitchIcons = \"none\";\r\n\r\n  /**\r\n   * A string representing the value of the switch.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc @private */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.checked && !this.disabled ? this.value : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    for (const label of this.labels) {\r\n      this.#hoverController.observe(label);\r\n      this.#pressedController.observe(label);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n    for (const label of this.labels) {\r\n      this.#hoverController.unobserve(label);\r\n      this.#pressedController.unobserve(label);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>\r\n      <div class=\"track\" aria-hidden=\"true\">\r\n        <div class=\"touch\" aria-hidden=\"true\"></div>\r\n        <div class=\"handle\">\r\n          <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n          <div class=\"base\">${this.#renderIcon()}</div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    return this.checked\r\n      ? html`<svg class=\"icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <path fill=\"currentColor\" d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"></path>\r\n        </svg>`\r\n      : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n          <path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n        </svg>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n    this.checked = !this.checked;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.checked = !this.checked;\r\n    }\r\n\r\n    // Prevent default avoids double-click in FireFox.\r\n    if (this.closest(\"label\")) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-switch\": M3eSwitchElement;\r\n  }\r\n}\r\n"],"names":["__decorate","decorators","target","key","desc","d","c","arguments","length","r","Object","getOwnPropertyDescriptor","Reflect","decorate","i","defineProperty","__classPrivateFieldGet","receiver","state","kind","f","TypeError","has","call","value","get","SuppressedError","SwitchToken","unsafeCSS","DesignToken","color","onPrimaryContainer","surfaceContainerHighest","outline","shape","corner","full","primary","onPrimary","onSurface","surface","onSurfaceVariant","primaryContainer","SwitchHandleStyle","css","motion","duration","short4","easing","standard","spring","fastEffects","fastSpatial","SwitchIconStyle","SwitchStateLayerStyle","SwitchStyle","SwitchTrackStyle","M3eSwitchElement","Labelled","Dirty","Touched","ConstraintValidation","Checked","FormAssociated","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","super","_M3eSwitchElement_clickHandler","set","this","e","_M3eSwitchElement_hoverController","HoverController","callback","hovering","disabled","_stateLayer","show","hide","_M3eSwitchElement_pressedController","PressedController","pressed","_track","classList","toggle","icons","isPressedKey","WeakMap","_M3eSwitchElement_instances","WeakSet","formValue","checked","connectedCallback","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eSwitchElement_renderIcon","defaultPrevented","dispatchEvent","Event","bubbles","composed","cancelable","closest","preventDefault","styles","query","prototype","property","reflect","customElement"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/tabs.js

@@ -5,10 +5,11 @@
  */
 import { LitElement, html, css, nothing, unsafeCSS } from 'lit';
 import { query, state, property } from 'lit/decorators.js';
-import { Selected, HtmlFor, KeyboardClick, Focusable, Disabled, AttachInternals, Role, DesignToken, element, ResizeController, addCustomState, hasCustomState, deleteCustomState } from '@m3e/web/core';
+import { Selected, HtmlFor, KeyboardClick, Focusable, Disabled, AttachInternals, Role, DesignToken, customElement, ResizeController, addCustomState, hasCustomState, deleteCustomState } from '@m3e/web/core';
 import { addAriaReferencedId, removeAriaReferencedId, selectionManager, SelectionManager } from '@m3e/web/core/a11y';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
+import '@m3e/web/slide-group';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -184,7 +185,7 @@ __decorate([query(".focus-ring")], M3eTabElement.prototype, "_focusRing", void 0
 __decorate([query(".state-layer")], M3eTabElement.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], M3eTabElement.prototype, "_ripple", void 0);
 __decorate([query(".label")], M3eTabElement.prototype, "label", void 0);
-M3eTabElement = M3eTabElement_1 = __decorate([element("m3e-tab")], M3eTabElement);
+M3eTabElement = M3eTabElement_1 = __decorate([customElement("m3e-tab")], M3eTabElement);
 
 /**
  * A panel presented for a tab.
@@ -227,7 +228,7 @@ let M3eTabPanelElement = class M3eTabPanelElement extends Role(LitElement, "tabp
 };
 /** The styles of the element. */
 M3eTabPanelElement.styles = css`:host { display: block; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; }`;
-M3eTabPanelElement = __decorate([element("m3e-tab-panel")], M3eTabPanelElement);
+M3eTabPanelElement = __decorate([customElement("m3e-tab-panel")], M3eTabPanelElement);
 
 var _M3eTabsElement_instances, _M3eTabsElement_directionalitySubscription, _M3eTabsElement_renderHeader, _M3eTabsElement_handleSlotChange, _M3eTabsElement_handleKeyDown, _M3eTabsElement_handleChange, _M3eTabsElement_handleSelectedChange, _M3eTabsElement_updateInkBar, _a;
 const MIN_PRIMARY_TAB_WIDTH = 24;
@@ -462,7 +463,7 @@ __decorate([property({
 __decorate([property({
   attribute: "next-page-label"
 })], M3eTabsElement.prototype, "nextPageLabel", void 0);
-M3eTabsElement = __decorate([element("m3e-tabs")], M3eTabsElement);
+M3eTabsElement = __decorate([customElement("m3e-tabs")], M3eTabsElement);
 
 export { M3eTabElement, M3eTabPanelElement, M3eTabsElement };
 //# sourceMappingURL=tabs.js.map